How to pass an Array from Child component to Parent component using hooks in react

5550 views reactjs
4

I am working on a React project I am trying to pass a data from Child component to Parent component, But I don't know how to pass data from Child component to Parent component.

This is App.js

import React from 'react';
import './App.css';
import Parent from './Parent/Parent';


function App() {
  return (
    <div className="container">
      <div className='row'>
        <div className='col-12'>
          <Parent></Parent>
        </div>
      </div>
    </div>
  );
}

export default App;

This is Parent.js

import React, { useState } from 'react';
import './Parent.css';
import Child from '../Child/Child';


const Parent = () => {
    return (
        <div className='container'>
            <div className='row'>
                <div className='col-12'>
                    <div className='one'>
                        <Child></Child>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default Parent

This is Child.js

import React from 'react';
import './Child.css';

const Child = () => {
    const students = ['Jasmine', 'Stella']
    return (
        <div className='container'>
            <div className='row'>
                <div className='col-12'>
                </div>
            </div>
        </div>
    )
}

export default Child

answered question

Well, passing data from Child to Parent is not a good idea. It would be better to pass a function from Parent to Child, which sets the array on the Parent side.

2 Answers

3

You can pass the data from Child to Parent by calling a function passed from Parent with the data you want to send as a parameter - like an event handler callback.

Let's say if you want to send students of your Child component to Parent when you click on an element:

const Parent = () => {
    const onUpdate = (data) => {
         // use the data
    };

    return (
        <div className='container'>
            <div className='row'>
                <div className='col-12'>
                    <div className='one'>
                        <Child update={onUpdate}></Child>
                    </div>
                </div>
            </div>
        </div>
    )
}
const Child = ({ update }) => {
    const students = ['Jasmine', 'Stella']

    return (
        <div className='container'>
            <div className='row'>
                <div className='col-12'>
                     <button click={() => update(students)} />
                </div>
            </div>
        </div>
    )
}

But if you have to pass data between components nested deeply, you should consider to use Redux or Context.

posted this
9

To do this, You have two ways,

  1. Use Redux context
  2. Use React prop callback

I suggest you use the first way and here is an example of implementing the redux context feature into your app based on your question's codes.

Demo

posted this

Have an answer?

JD

Please login first before posting an answer.