Simplest Way to create and pass props in React

Create a prop

Lets say there are two components, a Parent and Child function component as seen below. Here how we can pass data from the Parent to the Child.

function Parent() {

    return (
        <>

        </>
    )
}
export default Parent;

function Child() {

    return (
        <>

        </>
    )
}
export default Child;

Step 1

create a Parent component state using the useState React hook.

import { useState } from 'react'

function Parent() {
    const [word, setWord] = useState()

    return (
        <>

        </>
    )
}
export default Parent;

Step 2

Return the Child component in the parent component

import { useState } from 'react'
import Child from './Components/Child'

function Parent() {
    const [word, setWord] = useState()

    return (
        <>
            <Child />
        </>
    )
}
export default Parent;

Step 3

We pass the props in the Child component as an argument (similar to how we do it in a regular function). We must use curly braces { } to access data defined in JavaScript and pass it as the props for Child component, In this case we pass the word state.

import { useState } from 'react'
import Child from './Components/Child'

function Parent() {
    const [word, setWord] = useState()

    return (
        <>
            <Child theWord = { word } />
        </>
    )
}
export default Parent;

Step 4

Now here’s how we utilize the passed props data in the Child component, using the curly braced { } is important for passing props without using the props object (which we’ll see later on).

function Child({ theWord }) {
    console.log(theWord)
    return (
        <>
            <p> { theWord } </p>    
        </>
    )
}
export default Child;

Extra

You can also specify a default value for your props, say we wanted the default word (when no value has been passed to word from Parent) to be “kakashi” here’s how we do it.

function Child({ theWord = "kakashi" }) {
    console.log(theWord)
    return (
        <>
            <p> { theWord } </p>    
        </>
    )
}
export default Child;

But if you pass theWord={null} or theWord={0}, the default value will not be used