pass props from parent to child react code example

Example 1: pass data from child component to parent component react native

class Parent extends React.Component {
  state = { message: "" }
  callbackFunction = (childData) => {
        this.setState({message: childData})
  },
  render() {
          return (
              <div>
                   <Child1 parentCallback = {this.callbackFunction}/>
                   <p> {this.state.message} </p>
              </div>
          );
  }
}

class Child1 extends React.Component{
  sendData = () => {
           this.props.parentCallback("Hey Popsie, How’s it going?");
      },
  render() { 
  //you can call function sendData whenever you'd like to send data from child component to Parent component.
      }
};

Example 2: react pass prop to parent

//Form (Parent)
import React, { useState, Component } from 'react';
import Input from '../../shared/input-box/InputBox'

const Form = function (props) {

    const [value, setValue] = useState('');

    const onchange = (data) => {
        setValue(data)
        console.log("Form>", data);
    }

    return (
        <div>
            <Input data={value} onchange={(e) => { onchange(e) }}/>
        </div>
    );
}
export default Form;

//Input Box (Child)
import React from 'react';

const Input = function (props) {
    console.log("Props in Input :", props);

    const handleChange = event => {
        props.onchange(event.target.value);
    }

    return (
        <div>
            <input placeholder="name"
                id="name"
                onChange= {handleChange}
            />
        </div>
    );
}
export default Input;

Example 3: 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 4: 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}/> //This is how i'm passing props in parent component
        </div>
    );
}

export default App;


function Todo(props) {
    return (
        <div>
            {props.todos.map(todo => { // using props in child component and looping
                return (
                    <h1>{todo.title}</h1>
                )
            })}
        </div>  
    );
}

Example 5: how to pass state from parent to child in react

class SomeParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {color: 'red'};
  }
  render() {
    return <SomeChildComponent color={this.state.color} />;
  }
}