map function not showing elements on screen-CodePudding

i have this part of code the map function did not show any element of the array, if i console.log the variable it shows me the elements but for some reasons i can't show the elements on the screen.

Code



function Solution({list}){
  const data = list
    console.log(data);
    return(
        <div>
            {
                data?.map((item) => {
            
                    return (
                        <div>
                            <p> {item.title} </p>
                        </div>
                    )
                })
            }
        </div>
    )

}

export default Solution;


const list = [
    {
       
         title: "Home"
    },
    {
      
        title: "Service",
        subItem: ["Clean", "Cook"]
    },
    {
   
        title: "Kitchen",
        subItem: ["Wash", "Dish"]
    },
];


Solution({list})

CodePudding user response：

Please, just pass "list" link this.

<Solution list={list}/>

Hope will help you, Thanks)

CodePudding user response：

Check this out

import React from 'react';

function Solution({list}){
  const data = list
    console.log(list);
    return(
        <div>
            {
                data?.map((item) => {
                    return (
                        <div key={item.id}>
                            <p> {item.title} </p>
                        </div>
                    )
                })
            }
        </div>
    )
}

export function App(props) {

const list = [
    {
        id:1,
         title: "Home"
    },
    {
        id:2,
        title: "Service",
        subItem: ["Clean", "Cook"]
    },
    {
        id:3,
        title: "Kitchen",
        subItem: ["Wash", "Dish"]
    },
];

  return (
    <div className='App'>
      <Solution list={list} />
    </div>
  );
}

// Log to console
console.log('Hello console')

Have a unique key prop for each element when you map an array and send list array as props to your Solution component