Props passed by a parent component doing a map are undefined

Solution 1:

Your useEffect should look as follows:

const [sections, setSections] = useState([]);
...
useEffect(() => {
    getSections().then(sections=>setSections(sections));  
  }, [])

When you get data back it seems to be an array of sections so it should be a plural.

So when you pass sections down as a prop, it should be:

<ListOfSections sections={sections}/>

Which then allows you to map in <ListOfSections>

export default function ListOfSections ({sections}) {

  return (
    <div className="container_list_sections mt-4 ml-4">
        {     
            sections.map(section => 
            
                <Section 
                    section={section}
                />
            )
        }
    </div>
  )


};

For maps, you should also set a key, you can read more here