In simple terms, you can use the props
to pass variables to child components
So first, you define the child element which is able to accept the prop values
import React from 'react' export class Tasks extends React.Component { render() { return ( <div> <ul> <li>{this.props.title}</li> </ul> </div> ) } } export default Tasks;
Now, Task child element can accept the prop
named title
In your parent component
import React from 'react' import Task from './Task.js' export class Tasks extends React.Component { render() { return ( <div> <div> <Task title={"I need to finish cleaning"} /> </div> </div> ) } } export default Tasks;
You are rendering the Task
element by passing the value for the prop
title