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

React Props

March 18, 2020