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
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.
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>
);
}
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>
);
}
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.
