how can I pass a value on reactjs within the map?-CodePudding

ola, will it be that has some way to pass AxiosComponent inside the map without it returns this error ?

My code:

musicTop.map((item, key)=>{
      <AxiosComponent titles={item.title} key={key} items={item.items} />
})

my error:

Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.

CodePudding user response：

The arrow function you're providing to map doesn't return anything.

Try one of these instead (they are both the same, just with slightly different syntax):

musicTop.map((item, key) => {
  // Here we add the `return` keyword that was missing in the original code
  return <AxiosComponent titles={item.title} key={key} items={item.items} />
})

// Here we use a shorthand form of the arrow function to return the component
musicTop.map((item, key) => <AxiosComponent titles={item.title} key={key} items={item.items} />)

CodePudding user response：

musicTop.map((item, key)=>{
      <AxiosComponent titles={item.title} key={key} items={item.items} />
})

In the above code - item will be a single object from the list of objects you are having inside musicTop. Lets say you have the following data in musicTop -

musicTop = [{title: "some music", description: "zyx"}, {title: "music", description: "zyx"}]

Then in this case when you use map function you will have a single array element within item which would be -

item = {title: "some music", description: "zyx"} 
* in next iteration *
item = {title: "music", description: "zyx"}

and so on..

So instead of fetching item.items just try using item.