React, how to load states/properties from child components - reactjs

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?.

Answer 1

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.

Answer 2

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.

Answer 3

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