render a list of items in reactjs using props-CodePudding

I have a problem, which is fill in the blanks. you cannot change the default code only add code where comments are mentioned, I have linked the code sandbox too for better understanding.

import ReactDom from 'react-dom'

function ListItem(props) {
  //return a list item
}

function MyList(props){
  const stuff = props.stuff
  const listItems = //write a function to create list
  <ListItem   //props for calling listitem />
  );
  return(
    <ul>
    //display list items
    </ul>
  )
}

const stuff = [
  {id: 1, name: 'hi'},
  {id: 2, name: 'hii'},
  {id: 3, name: 'hiiii'},
  {id: 4, name: 'hiiiiiii'}
]



ReactDom.render(
//give write component name here
,document.getElementById('root'))

https://codesandbox.io/s/crazy-wiles-yzr6ff

CodePudding user response：

Just drill down your stuff into MyList, which exports an <ul></ul>, and use its items to render multiple ListItem which export a <li></li> containing the name.

I think you should educate yourself on the simplest React mechanism, passing props.

Here's an updated and working CodeSandbox.

import ReactDom from "react-dom";

function ListItem(props) {
  const { name } = props;
  return <li>{name}</li>;
}

function MyList(props) {
  const { stuff } = props;
  return (
    <ul>
      {stuff.map(({ id, name }) => (
        <ListItem key={id} name={name} />
      ))}
    </ul>
  );
}

const stuff = [
  { id: 1, name: "hi" },
  { id: 2, name: "hii" },
  { id: 3, name: "hiiii" },
  { id: 4, name: "hiiiiiii" }
];

ReactDom.render(<MyList stuff={stuff} />, document.getElementById("root"));