how to pass prop from child component to parent code example
Example 1: how to pass props from child to parent
class ToDoList extends React.Component { constructor(props) { super(props); this.state = { listDataFromChild: null }; }, myCallback = (dataFromChild) => { this.setState({ listDataFromChild: dataFromChild }); }, otherFn = () => { [...within this other function now I still have access to this.state.listDataFromChild...] } render() { return ( <div> <ToDoItem callbackFromParent={this.myCallback}/> [...now here I can pass this.state.listDataFromChild as a prop to any other child component...] </div> ); }});
Example 2: pass props from parent to child react functional component
import React, { useState } from 'react';
import './App.css';
import Todo from './components/Todo'
function App() {
const [todos, setTodos] = useState([
{
id: 1,
title: 'This is first list'
},
{
id: 2,
title: 'This is second list'
},
{
id: 3,
title: 'This is third list'
},
]);
return (
<div className="App">
<h1></h1>
<Todo todos={todos}/>
</div>
);
}
export default App;
function Todo(props) {
return (
<div>
{props.todos.map(todo => {
return (
<h1>{todo.title}</h1>
)
})}
</div>
);
}