React, how to load states/properties from child components

Question

Ok, let's say I have a component like:

Which is formed by 2 different components:

1) The entire rectangle(let's call it card)

2) Each side(the square) is another component(let's call it cardSide)

I added a button on card that when clicked it gathers all the information on each one of the cardSide components(text, note, image, etc).

My questions are, How can I achieve that? I've read about passing refs from parent to children and sending props from parent to children, but I haven't found any example of the opposite getting the props/states from children components.

I have no much experience on React and I'm using hooks and functions instead of classes(in case that matters) in Java this is very easy to do this by accessing the get methods of each instance, how can be done in React?.

I would recommend a small detour first: https://reactjs.org/docs/thinking-in-react.html — Aprillion, Apr 09 '19 at 21:29

score 0 · Answer 1 · answered Apr 09 '19 at 19:19

0

see this url: Call child method from parent. and read the ansewers of rossipedia.

it seems "Using Class Components (>= react@16.4)" section will be more useful for you.

answered Apr 09 '19 at 19:19

iftekhar

447
2
8

Well, first of all, thanks for the quick response. The problem here is I'm using hooks and functions, I do not use classes anymore, so I'm not able to use `this.` referente; 2nd, the example you mentioned is related to invoke a function in the child from the parent by using refs, this is not what I want to achieve, I want to access to props or states of the children from the parent – Eduardo Apr 09 '19 at 19:33
ok, then u sould read the **"Using Hooks and Function Components (>= react@16.8)"** section. and for accessing child props, and states, wrte get methods inside child component and then call those get methods from parent. – iftekhar Apr 09 '19 at 19:37
I did read it, as I mentioned, is not what I'm looking for. Those 'get methods' would need to be specified inside functions, but only one of them (the main one) is the one considered as exported, therefore, the only one visible – Eduardo Apr 09 '19 at 19:49

score 0 · Answer 2 · answered Apr 09 '19 at 19:31

0

You will need to create a function / method in the parent container that sets the state. From there you can pass it down to the child component which will be able to set the state of its parent.

answered Apr 09 '19 at 19:31

eric MC

766
2
10
36

Mahmoud-Abdelslam · Answer 3 · 2019-04-10T11:24:30.017

In order to achieve this communication i suggest that the child (CardSide Component) communicates with the Card Component via Events .

so when the user finish his operation on the card component an event is fired passing all the data to the parent let me show you an example for what i mean :

Card Component

class Card extends Component {
  handleCompelete = data => {
    //the data here are all the data entered from the child component
    //do some sorting using table name
  };

  render() {
    return <CardSide onCompelete={this.handleCompelete} />;
  }
}

CardSide Component

class CardComponent extends Component {
  render() {
    return (
      <div>
         {/* data here reprensets what you need to transfer to parent component */}
        <button onClick={() => this.props.onCompelete(data)} />
      </div>
    );
  }
}

Edit

You cannot access the state of the child component as it is private to it.

Regarding to the props , you can access it but it is ReadOnly that is passed from the parent component but the child component cannot modify it .

Actually there is a way to access the component children (but i see it will complicate your code rather than simplifying it and i do not recommend this )

lets say that this is you app.js

class App extends Component {
  constructor() {
    super();
    this.state = {
      name: "React"
    };
  }

  render() {
    return (
      <div>
        <h1>Title</h1>
        <Card>
          <CardSide someProp="My Child Prop Value" />
        </Card>
      </div>
    );
  }
}

as you can see i included CardSide with property with name someProp as a child for Card rathar than inserting it inside Card Component

In the Card Component i accessed the children property as the following :

class Card extends Component {
  handleCompelete = data => {
    //the data here are all the data entered from the child component
    //do some sorting using table name
  };

  render() {
    return <div>
     {this.props.children}
     {console.log(this.props.children)}
     {this.props.children.props.someProp}
    </div>;
  }
}

and the CardSide Component

class CardSide extends Component {
  render() {
    return (
      <div>
         {/* data here reprensets what you need to transfer to parent component */}
        <button onClick={() => this.props.onCompelete(data)} >
        Hello btn
        </button>
      </div>
    );
  }
}

As you can see it will get your structure more complicated and it will be hard to know who is the children for the card component without intensive tracing .

you can see the code in action via this link https://stackblitz.com/edit/react-fxuufw?file=CardSide.jsx

If I do that, the data you're placing in the render method will be rendered to the screen, I know maybe I could patch it by hiding it or so, but, does it mean there is not a straight way to access to the state/props of a child? — Eduardo, Apr 10 '19 at 00:59
actually you can access the props of the child from the parent but it will be complicated . i have updated the answer to do so ,please check . — Mahmoud-Abdelslam, Apr 10 '19 at 11:26

React, how to load states/properties from child components

3 Answers3