CODEWITHSUNDEEP
reactjsreact-props
Selvin
Selvin

Reputation: 815

React | pass data from parent to child component

In React, I'm having Files like

--parent.js
--child.js
--App.js

parent.js contains Textbox and button

child.js contains P tag

App.js contains Both Parent and Child Component

Problem

Pass the Textbox value from Parent on button click to child and display the value in child paragraph tag.

Full Code stackblitz

Upvotes: 5

Views: 31820

Answers (4)

Chiamaka Ikeanyi
Chiamaka Ikeanyi

Reputation: 484

Within the Parent component

import React, { useState } from "react";
import Child from "./Child";

export default function App() {
  const [value, setValue] = useState("");

  const handleInputChange = event => {
    const { value } = event.target;
    setValue(value);
  };

  const handleSubmit = event => {
    event.preventDefault();
    console.log(value);
  };

  return (
    <div className="App">
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          name="name"
          placeholder="Name"
          onChange={handleInputChange}
        />
        <button type="submit">Submit</button>
      </form>

      <Child data={value} />
    </div>
  );
}

Within the Child component

import React from "react";

export default function Child({ data }) {
  return (
    <div className="App">
      <h1>Hello Child</h1>
      <p>{data}</p>
    </div>
  );
}

View on CodeSandbox

Upvotes: 3

G_S
G_S

Reputation: 7110

Updated your sample to pass data to child component.

https://stackblitz.com/edit/react-trmj9i?file=child.js

Adding code below for quick reference

index.js

import React, { Component } from 'react';
import { render } from 'react-dom';
import Parent from './parent';
import Child from './child';
import './style.css';

class App extends Component {
  constructor() {
    super();
    this.state = {
      name: 'React',
      parentTextBoxValue: ''
    };
  }
  handleParentData = (e) => {
this.setState({parentTextBoxValue: e})
  }

  render() {
    return (
      <div>
        <Parent handleData={this.handleParentData} />
        <Child parentTextBoxValue={this.state.parentTextBoxValue}/>
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));

parent.js

import React, { Component } from 'react';
import Button from 'react-uikit-button';

class Parent extends Component {

constructor(props){
    super(props);
    this.state={TextBoxValue: ""}
}   

  SubmitValue = (e) => {
     this.props.handleData(this.state.TextBoxValue)
  }

   onChange=(e)=>{
this.setState({TextBoxValue: e.target.value})
   } 
  render() {
    return (
      <div className="">
        <input type="text" name="TextBox"  onChange={this.onChange}
         />
        <Button onClick={this.SubmitValue}>Submit Value</Button>
      </div>
    );
  }
}

export default Parent;

child.js

import React, { Component } from 'react';

class Child extends Component {

    constructor(props){
        super(props);
    }


  render() {
    return (
      <div className="App">
       <p>{this.props.parentTextBoxValue}</p>
      </div>
    );
  }
}

export default Child;

Just to give what I did, Passed a function from App.js to parent which can be helped to lift the state up. handled onchange in parent component for text box and on submit updated app state. Finally passed this state to child component.

Upvotes: 6

Suraj Patil
Suraj Patil

Reputation: 180

import React from "react";

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

    render(){
        return(
            <div className = "parent">
                <child data={this.state.name}/> 
            </div>
        );
    }

}

export default Parent;

export function Child(props){
    return(
        <div>{props.data}</div>
    );
}

Upvotes: 6

Tyler
Tyler

Reputation: 986

On the button click you should be able to take the textbox's value and add it to your parent's state using the setState function.

Afterwards, your parent's render method should be called; because, the state was changed. You can then place the value held in states into an attribute on your child element.

<child message={value}>

Afterwards, you can access that message through the props in the child.

class child extends Component {
    render(){
        //use this.props.message to access message
    }
}

From there you can do whatever you want with the value.

Upvotes: 0

Related Questions