React, pass data from Child to Parent, Parent to Child
typing data in parent
Typing data in Child, data passed to Parent
Type data in ChildChildComponent and passed to Child Component and Parent Component.
In React, a component can pass data or handle functions to a child component using the properties of the tag, in the child component, the data or handle function is received in the props.
To pass data from the child component to the parent component, the parent component will pass a function in a prop in order to get the data from the child component.
Parent Component.js
import React from 'react';
import ReactDOM from 'react-dom';
import ChildComponent from './ChildComponent';
import "./css/styles.css";
class ParentComponent extends React.Component {
state = { parentVar: '',
parentVar2: '',
parentInputVar: ''};
getData = (val) => {
this.setState({parentVar: `${val}`});
console.log("ParentComponent state: " + this.state );
console.log("ParentComponet-ChildComponent " + val);
}
getData2 = (val) => {
console.log("ParentComponent getData2 val: " + val);
this.setState({parentVar2: `${val}`});
console.log("ParentComponent getData2: " + `${this.state.parentVar2}`);
}
handleChange = () => {
var value = this.inputData.value;
this.setState({parentInputVar: `${value}`});
console.log("handleInput: " + value);
}
render(){
return(
<div className="parentComponent">
<h3 className="divTitle">ParentComponent</h3>
<label className="labelfield">this.state.parentVar:</label>
<label className="dataPassed labelData opacity">{this.state.parentVar} </label>
<label className="labelfield">this.state.parentVar2:</label>
<label className="Level2 dataPassed labelData opacity">{this.state.parentVar2} </label>
<label className="labelfield">this.state.parentInputVar:</label>
<label className='dataPassedfromParent labelData'>{this.state.parentInputVar} </label>
<label className="labelfield">parentVar2: </label>
<input className="parentInput inputField labelData" type='text' placeholder='type any value'
ref={(ref) => this.inputData = ref}
onChange={this.handleChange}/>
<ChildComponent toReturnData={this.getData} toReturnData2={this.getData2}
dataToPass={this.state.parentInputVar}/>
<br/>
</div>
);
}
}
export default ParentComponent;
ChildComponent.js
import React from 'react';
import ReactDOM from 'react-dom';
import ChildChildComponent from './ChildChildComponent';
class ChildComponent extends React.Component {
state = {
childVar: '',
receiveDataChildChild: '',
}
handleChange = () => {
var data = this.inputData.value;
this.setState({childVar: `${data}`})
this.props.toReturnData(data);
console.log("childComponent handleChange: " + data);
}
getDataChildChild = (val) => {
this.setState({receiveDataChildChild: `${val}`} )
console.log("getDataChildChild data: " + this.state.receiveDataChildChild);
}
getData2 = (val) => {
this.props.toReturnData2(val);
console.log("ChildComponent getData2: " + val);
}
render(){
return(
<div className="childComponent">
<h3 className='divTitle'>ChildComponent </h3>
<label className="labelfield">this.state.childVar:</label>
<label className="dataPassed labelData opacity">{this.state.childVar}</label>
<label className="labelfield">this.state.receiveDataChildChild:</label>
<label className='dataPassed labelData Level2 opacity'>{this.state.receiveDataChildChild}</label>
<label className="labelfield">data passed form parent (props):</label>
<label className='dataPassedfromParent labelData'>{this.props.dataToPass}</label>
<label className="labelfield">Data passed to Parent </label>
<input className="dataPassed labelData inputField" placeholder="input data to be passed to parent"
ref={(ref) => this.inputData = ref }
type="text" onChange={this.handleChange}>
</input>
<ChildChildComponent toReturnData={this.getDataChildChild}
toReturnData2={this.getData2}
dataToPass={this.props.dataToPass} />
</div>
);
}
}
export default ChildComponent;
ChildChildComponent.js
import React from 'react';
class ChildChildComponent extends React.Component {
state = {
childChildVar: '',
}
handleChange = () => {
var data = this.inputData.value;
this.setState({ childChildVar: `${data}`})
this.props.toReturnData(data);
this.props.toReturnData2(data);
console.log("childChildComponent Data: " + data)
}
render() {
return(
<div className="childChildComponent">
<h3 className='divTitle'>ChildChildComponent</h3>
<label className="labelfield">this.state.childChildVar:</label>
<label className='labelData'> {this.state.childChildVar}</label>
<label className="labelfield">data passed form parent (props):</label>
<label className='dataPassedfromParent labelData'>{this.props.dataToPass}</label>
<label className="labelfield">Data passed to Parent</label>
<input className="Level2 labelData inputField" type='text' placeholder="input data to be passed to PARENTS"
ref={(ref) => this.inputData = ref}
onChange={this.handleChange}>
</input>
</div>
);
}
}
export default ChildChildComponent;
styles.css
.parentComponent {
background: rgb(42, 112, 192);
color: rgb(209, 208, 208);
padding: 10px;
display: grid;
grid-template-columns: 1fr 1fr;
border-radius: 5px;
max-width: 800px;
}
.childComponent {
background:rgb(84, 137, 197);
color: rgb(50, 50, 50);
padding-top: 10px;
padding-bottom: 10px;
padding-left: 30px;
padding-right: 20px;
margin-top: 20px;
grid-column: span 2;
display: grid;
grid-template-columns: 1fr 1fr;
border-radius: 5px;
}
.childChildComponent {
background:rgb(129, 161, 197);
color: rgb(58, 58, 58);
padding-top: 10px;
padding-bottom: 10px;
padding-left: 30px;
padding-right: 20px;
margin-top: 20px;
border-radius: 5px;
grid-column: span 2;
display: grid;
}
.dataPassed {
color:darkred;
background: orange;
}
.opacity{
opacity: 50%;
}
.Level2 {
color:darkred;
background: rgb(201, 131, 1);
}
.parentInput {
background: lightgrey;
}
.inputField {
border-radius: 5px;
font-weight: bold;
}
.dataPassedfromParent {
color: lightgray;
background: rgb(42, 112, 192);
}
.divTitle{
grid-column: span 2;
}
.labelfield {
text-align:right;
padding: 5px;
margin: 5px;
}
.labelData {
padding: 5px;
margin: 5px;
border-radius: 5px;
}
eot
No hay comentarios:
Publicar un comentario