Summary of the Problem
Consider a search bar <SearchBar/> (where you type different college majors) and a dropdown <Dropdown/> (a dropdown showing some details about a major i.e. "About Computer Science > Professors of Computer Science", "Computer Science Ratings > Best Computer Science Calsses", etc). I enter a word into the search bar, then I click submit. The information on the dropdown should change depending on what the user submits. The information that goes in the dropdown is fetched from a mongo collection
Inside a React component, I have the following function. This function is called when the user clicks submit.
I expect the major variable to be updated once the above function is called (i.e. when the user clicks submit)
The dropdown is returned as <Dropdown dropdown_information={major.informationPiece1}/>, where major.informationPieces1 is a list of objects
The Dropdown component definition looks like:
const Dropdown = ({informationPieces1}) => {
return (
<>
<ul>
{informationPiece1.map((piece, index) => {
return (
<h1 key={index}> {piece.name} <h1/>
)
})}
</ul>
</>
)
}
informationPiece1 in informationPiece1.map((piece, index) => ... comes up as undefined. I get Uncaught TypeError: Cannot read properties of undefined (reading 'map')console.log(informationPieces1) inside the Dropdown React component defintion, I see the array in the console properly.I believe this is a React problem. I believe this may be related to an incorrect use of React's props on my part. What steps would you recommend me to follow to verify if this is true?
You are calling Dropdown component with dropdown_information as prop and expecting informationPieces1 in the component. So or you call the component with the prop informationPieces1 or you use the prop dropdown_information inside the component
I'll clarify:
const Dropdown = ({informationPieces1}) => { // if you define the component like this the you must call it:
<Dropdown informationPieces1={}/>
///////////////////////////
// If you call the component like this:
<Dropdown dropdown_information={}/>
//then you must write the definition as:
const Dropdown = ({dropdown_information}) => {Your prop's names must match in both the definition and the call