We can perform one-way data flow in React; basically in JavaScript. We can send data from the parent component to its child component. But what if there is a need to send data from the child component to the parent component?

In this article, we will learn how to send data from the child component and use it in the parent component which is called the bottom-up or lift-up method in React. Below are the steps that we are going to follow,

• Create a react project
• Create a component for a form
• Lifting up the data

Create a react project

• Run the below commands in the command prompt

npx create-react-app my-app
cd my-app
npm start

• Open the app.js file from src folder which resides inside the react project folder.

Note: this App component will a parent component in our case.

// src/App.js

import React, { useEffect, useState } from "react";

function App() {

  return (

    <div>

    </div>
  );

}

export default App;

Whatever we write inside this div, it will be reflected in the browser.

Create a form component

• Create a form component with an input field.

Note: This DataForm component will be the child component and we are about to pass data from this DataForm component to its parent component (App.js)

import React, { useState } from 'react';

const DataForm = () => {


    return (
        <div className=" flex justify-center lg:h-screen items-center">
            <div className="card w-full md:w-96 items-center shadow-2xl bg-base-100">
                <form className="card-body w-full lg:w-96">
                    <div className="form-control">
                        <label className="label">
                            <span className="label-text">Name</span>
                        </label>
                        <input
                            type="text" placeholder="name" className="input input-bordered" />

                    </div>


                </form>



            </div>
        </div>
    );
};

export default DataForm;

Note: We are using Tailwind CSS to use the styled-components. And to know more about creating forms and showing data in react, please read this article.

• Call this form component in the app.js file

// src/App.js

import React, { useEffect, useState } from "react";
import DataForm from "./components/DataForm";

function App() {

  return (

    <div>
      <DataForm />
    </div>
  );

}

export default App;

Now, in this scenario, this DataForm is a child component of this app.js file (App component). We want to show whatever has been written in the input field in the DataForm component will be shown from this App component.

Lifting up the data Child to parent component in ReactJS

• Create a state hook in app.js file to store and change the input field value

const [textValue, setTextValue] = useState('');

// src/App.js

import React, { useEffect, useState } from "react";
import DataForm from "./components/DataForm";

function App() {
  const [textValue, setTextValue] = useState('');
  return (

    <div>
      <h1 className="text-4xl">This is data: {textValue}</h1>
      <DataForm />
    </div>
  );

}

export default App;

<DataForm setTextValue={setTextValue} />

// src/App.js

import React, { useEffect, useState } from "react";
import DataForm from "./components/DataForm";

function App() {
  const [textValue, setTextValue] = useState('');
  return (

    <div>
      <h1 className="text-4xl">This is data: {textValue}</h1>
      <DataForm setTextValue={setTextValue} />
    </div>
  );

}

export default App;

import React, { useState } from 'react';

const DataForm = (props) => {

    const { setTextValue } = props;
    return (
        <div className=" flex justify-center lg:h-screen items-center">
            <div className="card w-full md:w-96 items-center shadow-2xl bg-base-100">
                <form className="card-body w-full lg:w-96">
                    <div className="form-control">
                        <label className="label">
                            <span className="label-text">Name</span>
                        </label>
                        <input
                            type="text" placeholder="name" className="input input-bordered" />

                    </div>

                </form>



            </div>
        </div>
    );
};

export default DataForm;

<input onChange={e => setTextValue(e.target.value)} type="text" placeholder="name" className="input input-bordered" />

import React, { useState } from 'react';

const DataForm = (props) => {

    const { setTextValue } = props;
    return (
        <div className=" flex justify-center lg:h-screen items-center">
            <div className="card w-full md:w-96 items-center shadow-2xl bg-base-100">
                <form className="card-body w-full lg:w-96">
                    <div className="form-control">
                        <label className="label">
                            <span className="label-text">Name</span>
                        </label>
                        <input
                            onChange={e => setTextValue(e.target.value)}
                            type="text" placeholder="name" className="input input-bordered" />

                    </div>



                    <div className="form-control mt-6">
                        <button type="submit" className="btn btn-primary">Check Data</button>
                    </div>

                </form>



            </div>
        </div>
    );
};

export default DataForm;