Can a React.js parent component request data from child component?

Asked
Active3 hr before
Viewed126 times

8 Answers

requestparentchildreactcomponent
90%

Pass the callback function to the child as a props from the parent component.,In the parent component, create a callback function. This callback function will retrieve the data from the child component.,The child component calls the parent callback function using props and passes the data to the parent component.

Step 1: Create a React application using the following command:

npx create - react - app foldername

Step 2: After creating your project folder i.e. foldername, move to it using the following command:

cd foldername
load more v
88%

Can anyone help me to find the problem? ,P.S. The child component is creating a dropdown from a json file, and I need the dropdown list to show both elements of the json array next to each other(like: "aaa,english" as the first choice!) ,This example showing how to pass function from child component to parent and use this function to get data from child.

Parent:

<div className="col-sm-9">
     <SelectLanguage onSelectLanguage={this.handleLanguage} /> 
</div>

Child:

handleLangChange = () => {
   var lang = this.dropdown.value;
   this.props.onSelectLanguage(lang);
}

Parent

class ParentComponent extends React.Component {

    state = { language: '' }

    handleLanguage = (langValue) => {
        this.setState({language: langValue});
    }

    render() {
         return (
                <div className="col-sm-9">
                    <SelectLanguage onSelectLanguage={this.handleLanguage} /> 
                </div>
        )
     }
}

Child

var json = require("json!../languages.json");
var jsonArray = json.languages;

export class SelectLanguage extends React.Component {
    state = {
            selectedCode: '',
            selectedLanguage: jsonArray[0],
        }

    handleLangChange = () => {
        var lang = this.dropdown.value;
        this.props.onSelectLanguage(lang);            
    }

    render() {
        return (
            <div>
                <DropdownList ref={(ref) => this.dropdown = ref}
                    data={jsonArray} 
                    valueField='lang' textField='lang'
                    caseSensitive={false} 
                    minLength={3}
                    filter='contains'
                    onChange={this.handleLangChange} />
            </div>            
        );
    }
}

Using createClass syntax which the OP used in his answer Parent

const ParentComponent = React.createClass({
    getInitialState() {
        return {
            language: '',
        };
    },

    handleLanguage: function(langValue) {
        this.setState({language: langValue});
    },

    render() {
         return (
                <div className="col-sm-9">
                    <SelectLanguage onSelectLanguage={this.handleLanguage} /> 
                </div>
        );
});

Child

var json = require("json!../languages.json");
var jsonArray = json.languages;

export const SelectLanguage = React.createClass({
    getInitialState: function() {
        return {
            selectedCode: '',
            selectedLanguage: jsonArray[0],
        };
    },

    handleLangChange: function () {
        var lang = this.refs.dropdown.value;
        this.props.onSelectLanguage(lang);            
    },

    render() {

        return (
            <div>
                <DropdownList ref='dropdown'
                    data={jsonArray} 
                    valueField='lang' textField='lang'
                    caseSensitive={false} 
                    minLength={3}
                    filter='contains'
                    onChange={this.handleLangChange} />
            </div>            
        );
    }
});

JSON:

{
   "languages": [

      {
         "code": "aaa",
         "lang": "english"
      },
      {
         "code": "aab",
         "lang": "Swedish"
      },
   ]
}
load more v
72%

Passing data from child to parent,Create a callback function in the parent component. This callback function will get the data from the child component.,The child component calls the parent callback function using props.

Pretag
 Pretag team - issue, fix, solve, resolve
65%

React is a JavaScript library created by Facebook. Data handling in React could be a bit tricky, but not as complicated as it might seem. I have currently compiled three methods of Data Handling in React :-,I hope this gives clear implementation details for Data Passing between various components in React.Recommended:,Your home for data science. A Medium publication sharing concepts, ideas and codes.

App└── Parent├── Child1└── Child2
load more v
75%

Type the following command to create a new react app:,Create new Area component and type out the below code into Area.js,The Area and Parameter components are passing the value from child component to parent component.

Type the following command to create a new react app:

npx create - react - app demo

Now, go to the project folder:

cd demo
load more v
40%

When learning ReactJS, we often hear the term props. While it may sound confusing, props are nothing but objects which are used to pass data from one component to another. In this guide, we'll go through the React props in detail. We'll also look at how we can pass a props object from a child component to a parent component. ,Let's have a look at our example using a functional component where the props are received as arguments in the function signature, as shown below:,Most developers wonder about passing props from a child to a parent component when learning React. However, it’s not possible. Let's update the previous example with an additional Button component for toggling.

1import React, { Component } from 'react';
2class App extends Component {
3  render() {
4    const hello = 'Say Hello to learning Props/State in React!';
5    return (
6      <div>
7        <h1>{hello}</h1>
8      </div>
9    );
10  }
11}
12export default App;
load more v
22%

How to Force a Component to Re-render with React Hooks?In React class components, the forceUpdate method is provided for forcing the re-rendering of a… ,We can pass data to a Vue.js component via props. To do that, we add…, 1 Comment on How to Send Data From Child to Parent Component with React Hooks?

For instance, we can write:

import { useCallback, useState } from "react";

const Counter = ({ parentCallback }) => {
  const [count, setCount] = useState(0);

  return (
    <button
      onClick={() => {
        setCount((count) => count + 1);
        parentCallback(count + 1);
      }}
    >
      increment
    </button>
  );
};

export default function App() {
  const [count, setCount] = useState(0);

  const callback = useCallback((count) => {
    setCount(count);
  }, []);

  return (
    <div className="App">
      <Counter parentCallback={callback} />
      <h2>count {count}</h2>
    </div>
  );
}
60%

In this tutorial, I'll be showing you how you can do it.,Firstly, let's pass data between a parent component and a child component. .,First, you'll need to create two components, one parent and one child.

import React from 'react'

export default function Parent() {
  return (
    <div>
      
    </div>
  )
}
load more v

Other "request-parent" queries related to "Can a React.js parent component request data from child component?"