Pass Data/Properties from child to parent in react js

javascript react js 6 years, 4 months ago

//Parent.js import React from "react"; import Child from './Child' export default class Parent extends React.Component{ constructor(props){ super(props); this.handleData = this.handleData.bind(this); this.state = { fromChild: '' }; } handleData(data) { this.setState({ fromChild: data }); } render(){ return( <div>{this.state.fromChild.child != undefined ? this.state.fromChild.child.name : 'See the output here'} <br /> Child1 : <Child name={'child1'} id = {1} handlerFromParant={this.handleData}/> <br /> Child2 : <Child name={'child2'} id = {2} handlerFromParant={this.handleData}/> </div> ) } } //Child.js import React from "react"; export default class Child extends React.Component{ constructor() { super(); this.handleChange = this.handleChange.bind(this); this.state = { inputField: '' }; } handleChange(child, event) { this.props.handlerFromParant(child); this.setState({ inputField: event.target.value }); } render(){ let id = this.props.id let name = this.props.name let child = { 'id' : id, 'name' : name } return ( <div> <input type="text" id="theInput" value={this.state.inputField} onChange={(e)=>this.handleChange({child}, e)} /> </div> ); } }

2486

0

0

Check by Parent.js,Place both in the same location and test.
Happy Coding :-)

Posted By

Please Login to Comment Here


                            //plugin to any test js file and proceed
//This is the best standard to work with
const style = {background:'cyan', color:

javascript react js css


                            import React from 'react'
//No need to give the complete path, rea
//If not exists searches globally

javascript react js


                            //Basic way
<!DOCTYPE html>
<html>

javascript react js html


                            //State Component
<!DOCTYPE html>
<html>

javascript react js


                            //Basic way
<!DOCTYPE html>
<html>

javascript react js webpack


                            import React from 'react'
export default class ToggleComponent ext
  constructor(props){

javascript react js


                            import React from 'react'
export default class StateProps extends

javascript react js


                            import React, { Component } from 'react'

javascript react js


                            async function showAvatar() {

  // read our JSON


                            //JS Code
function runShellScript(){
    const process = require('child_proce

javascript shell node js


                            //Fill


                            // Delete the files recursively.
//fs is a built in node module.
const fs = require('fs');

javascript node js


                            const fs = require('fs');
//fs is a built in module in node js
const filePath = '/Desktop/Test.json';

javascript node js


                            //fs is a built in node module
const fs = require('fs');
const filePath = "/home/Desktop"

javascript node js


                            function getAllVideoAdGroups() {
  var adGroupIterator = AdWordsApp.video
  Logger.log('Total adGroups found : ' +

javascript adwords-script


                            /*App.js*/
import React, { Component } from 'react'

javascript react js


                            const tar = require('tar');
  tar.c(
    {

node js javascript react js


                            const tar = require('tar');
  tar.x(
    {

node js javascript react js


                            var my_list = [19, 32, 12, 34, 22];

$.each(my_list, function(index, value){

jquery javascript


                            var my_obj = {
    "one": "value1",
    "two": "value2",

jquery javascript