I am currently working on a to-do list project. Whenever I add a folder, it appears vertically aligned.
(click the /Bottom bar/ button -> it will display a folder in the /Homecomponent/)
Each new folder I add goes further down the page
However, I would like the folders to align horizontally as shown in the image on the right. I tried using flex-wrap css on all the divs but couldn't get it to work
Here is the code snippet:
const CreateFolder = () => {
let space = <div>
<img className="space" alt="" src="/image/folder-icon.png" /> Adrina
<img className="dwarrow" alt="" src="/image/dwarrow_icon.png"/>
</div>
const [createFolder, setCreateFolder] = useState([])
const addItem = (e) => {setCreateFolder([...createFolder, space])}
return (
<div>
<Bottombar submit={addItem}/>
<Homecomponent createFolder={createFolder}/>
</div>
)
}
export default CreateFolder