reactjs function component with props demo

todolist.jsx

const todos = [];
  todos.push("Buy a big doll");
  todos.push("Do yoga");
  todos.push("Review component article");

function TodoList(props) {
  return (
         <div className="todo-lists">
              <h1>TodoList</h1>
              <ul>
                <li>{ props.data[0]}</li>
                <li>{ props.data[1]}</li>
                <li>{ props.data[2]}</li>
              </ul>
            </div>
        );
}

function App() {
    return (
    <div>
      <TodoList data={todos}/>
    </div>
  );
 }

ReactDOM.render(<App />, document.getElementById('root'));