Develop Reference

Pass input data from child to parent React.js

This may seem kind of basic but I'm just learning how to use React. Currently what I have going is when I type in the input field and submit, the system console logs my 'search' input. What I'm trying to do is pass my 'search' data from my child component to the parent. Looking for any tips or leads to the right direction.
This is what I have for my child component:
export default class SearchBar extends React.Component {
constructor(props) {
super(props);
this.state = {
search: ''
};
}
onChange = event => {
this.setState({ search: event.target.value });
};
onSubmit = event => {
const { search } = this.state;
event.preventDefault();
console.log(search);
};
render() {
return (
<div className='search-bar'>
<form onSubmit={this.onSubmit}>
<input
className='search'
type='text'
placeholder='Search'
onChange={this.onChange}
search={this.props.search}
value={this.state.searchinput}
parentCallback={this.onChange}
></input>
</form>
<FontAwesomeIcon className='search-icon' icon={faSearch} />
</div>
);
}
}
And in my Parent component (nothing much at the moment)
export default class Parent extends React.Component {
constructor(props) {
super(props);
this.state = {
search: ''
};
}
searchUpdate = search => {
console.log(search);
};
render() {
console.log(this.props.search);
return (
<div className='container'>
<SearchBar/>
</div>
);
}
}

Generally to pass data from child component to Parent Component, you can pass a reference of a function as props to child component from parent component and call that passed function from child component with data.
You can do something like this:
export default class SearchBar extends React.Component {
constructor(props) {
super(props);
this.state = {
search: ''
};
}
onChange = event => {
this.setState({ search: event.target.value });
};
onSubmit = event => {
const { search } = this.state;
event.preventDefault();
console.log(search);
this.props.passSearchData(search);
};
render() {
return (
<div className='search-bar'>
<form onSubmit={this.onSubmit}>
<input
className='search'
type='text'
placeholder='Search'
onChange={this.onChange}
search={this.props.search}
value={this.state.searchinput}
parentCallback={this.onChange}
></input>
</form>
<FontAwesomeIcon className='search-icon' icon={faSearch} />
</div>
);
}
In parent component:
export default class Parent extends React.Component {
constructor(props) {
super(props);
this.state = {
search: ''
};
}
searchUpdate = search => {
console.log(search);
this.setState({ ...state, search: search })
};
render() {
console.log(this.props.search);
return (
<div className='container'>
<SearchBar passSearchData={this.searchUpdate} />
</div>
);
}

The simplest way would be to pass a function from parent to child:
// in parent component
const setSearchValue = (search) => {
// setState to search
this.setState({search});
}
render (){
return <>
<SearchBar onsearch={this.setSearchValue} />
</>
}
// in child component
// change your searchUpdate
searchUpdate = () => {
const {onsearch} = this.state;
// function call to pass data to parent
this.props.onsearch(onsearch)
}

Just have a function that is passed as a prop to the child component. Let child component do the handle change part and pass the value back to the parent and then do whatever you want to with the value
Code sandbox: https://codesandbox.io/s/react-basic-example-vj3vl
Parent
import React from "react";
import Search from "./Search";
export default class Parent extends React.Component {
searchUpdate = search => {
console.log("in parent", search);
};
render() {
console.log(this.props.search);
return (
<div className="container">
<Search handleSearch={this.searchUpdate} />
</div>
);
}
}
Child
import React from "react";
export default class Search extends React.Component {
constructor(props) {
super(props);
this.state = {
search: ""
};
}
onChange = event => {
this.setState({ search: event.target.value }, () => {
console.log("in child", this.state.search);
this.props.handleSearch(this.state.search);
});
};
onSubmit = event => {
const { search } = this.state;
event.preventDefault();
console.log(search);
};
render() {
return (
<div className="search-bar">
<form onSubmit={this.onSubmit}>
<input
className="search"
type="text"
placeholder="Search"
onChange={this.onChange}
search={this.props.search}
value={this.state.searchinput}
/>
</form>
</div>
);
}
}

React JS. Append element to the DOM

I'm new to react and I've been playing around with it the past few days. I'm trying to append a value to the DOM, I found a way to do it but I'm looking for a way to do with by
var para = document.createElement("li");
var t = document.createTextNode(value);
para.appendChild(t);
document.getElementById("root").appendChild(para);
But, I'm looking for a different way. I tried a few different ways but I'm stuck. Is there a way other than this way above ^^^^
import React, { Component } from 'react';
import { render } from 'react-dom';
export class Parent extends React.Component {
constructor(props) {
this.greet = this.greet.bind(this);
this.state = { text: " " };
}
greet(value) {
//console.log(value);
var para = document.createElement("li");
var t = document.createTextNode(value);
para.appendChild(t);
document.getElementById("root").appendChild(para);
}
render() {
return (
<div>
<Child onGreet={this.greet} />
</div>
)
}
};
export class Child extends React.Component {
constructor(props) {
this.state = { value: '' };
this.handleChange = this.handleChange.bind(this);
this.eventClick = this.eventClick.bind(this);
}
handleChange(event) {
this.setState({ value: event.target.value });
}
eventClick() {
this.props.onGreet(this.state.value);
}
render() {
return (
<div>
<input type="text" value={this.state.value} onChange={this.handleChange} />
<button type="button" onClick={this.eventClick}>Submit </button>
</div>
)
}
};

You can try to utilize React's state property.
import React, { Component } from 'react';
import { render } from 'react-dom';
export class Parent extends React.Component {
constructor(props) {
this.greet = this.greet.bind(this);
this.state = {
text: [],
};
}
greet(value) {
//console.log(value);
const {text} = this.state
return this.setState({
text: text.concat(value),
});
}
render() {
return (
<div>
<Child onGreet={this.greet} />
<ul>
{this.state.text.map(x => (<li>{x}</li>))}
</ul>
</div>
)
}
};
With this, the list gets populated as the value of this.state.text changes.

TypeError: this.props.update is not a function

Iam trying to do two way binding in react.where if we change any value in parent or child, it should reflect in another component. Since it is getting error while passing the input value. please help.
parent
export default class Header extends Component {
constructor() {
super();
this.state = {
value: "sample"
};
}
updated(changeValue) {
this.setState({
value: changeValue
})
}
render() {
return (
<div>
<h1>{this.state.value} </h1>
<App value={this.state.value} update={this.updated.bind(this)} />
</div>
);
}
}
child :
class App extends Component {
update(event) {
var changeValue = event.target.value;
this.props.update(changeValue);
}
render() {
return (
<div>
<input type="text" value={this.props.value} onChange={this.update.bind(this)} />
</div>
);
}
}

In react + redux, what's the best way to access a parent's property from a child component? [duplicate]

I'm making my first step in ReactJS and trying to understand communication between parent and children.
I'm making form, so I have the component for styling fields. And also I have parent component that includes field and checking it. Example:
var LoginField = React.createClass({
render: function() {
return (
<MyField icon="user_icon" placeholder="Nickname" />
);
},
check: function () {
console.log ("aakmslkanslkc");
}
})
var MyField = React.createClass({
render: function() {
...
},
handleChange: function(event) {
// call parent!
}
})
Is there any way to do it. And is my logic is good in reactjs "world"? Thanks for your time.

To do this you pass a callback as a property down to the child from the parent.
For example:
var Parent = React.createClass({
getInitialState: function() {
return {
value: 'foo'
}
},
changeHandler: function(value) {
this.setState({
value: value
});
},
render: function() {
return (
<div>
<Child value={this.state.value} onChange={this.changeHandler} />
<span>{this.state.value}</span>
</div>
);
}
});
var Child = React.createClass({
propTypes: {
value: React.PropTypes.string,
onChange: React.PropTypes.func
},
getDefaultProps: function() {
return {
value: ''
};
},
changeHandler: function(e) {
if (typeof this.props.onChange === 'function') {
this.props.onChange(e.target.value);
}
},
render: function() {
return (
<input type="text" value={this.props.value} onChange={this.changeHandler} />
);
}
});
In the above example, Parent calls Child with a property of value and onChange. The Child in return binds an onChange handler to a standard <input /> element and passes the value up to the Parent's callback if it's defined.
As a result the Parent's changeHandler method is called with the first argument being the string value from the <input /> field in the Child. The result is that the Parent's state can be updated with that value, causing the parent's <span /> element to update with the new value as you type it in the Child's input field.

2019 Update with react 16+ and ES6
Posting this since React.createClass is deprecated from react version 16 and the new Javascript ES6 will give you more benefits.
Parent
import React, {Component} from 'react';
import Child from './Child';
export default class Parent extends Component {
es6Function = (value) => {
console.log(value)
}
simplifiedFunction (value) {
console.log(value)
}
render () {
return (
<div>
<Child
es6Function = {this.es6Function}
simplifiedFunction = {this.simplifiedFunction}
/>
</div>
)
}
}
Child
import React, {Component} from 'react';
export default class Child extends Component {
render () {
return (
<div>
<h1 onClick= { () =>
this.props.simplifiedFunction(<SomethingThatYouWantToPassIn>)
}
> Something</h1>
</div>
)
}
}
Simplified stateless child as ES6 constant
import React from 'react';
const Child = (props) => {
return (
<div>
<h1 onClick= { () =>
props.es6Function(<SomethingThatYouWantToPassIn>)
}
> Something</h1>
</div>
)
}
export default Child;

You can use any parent methods. For this you should to send this methods from you parent to you child like any simple value. And you can use many methods from the parent at one time. For example:
var Parent = React.createClass({
someMethod: function(value) {
console.log("value from child", value)
},
someMethod2: function(value) {
console.log("second method used", value)
},
render: function() {
return (<Child someMethod={this.someMethod} someMethod2={this.someMethod2} />);
}
});
And use it into the Child like this (for any actions or into any child methods):
var Child = React.createClass({
getInitialState: function() {
return {
value: 'bar'
}
},
render: function() {
return (<input type="text" value={this.state.value} onClick={this.props.someMethod} onChange={this.props.someMethod2} />);
}
});

Using Function || stateless component
Parent Component
import React from "react";
import ChildComponent from "./childComponent";
export default function Parent(){
const handleParentFun = (value) =>{
console.log("Call to Parent Component!",value);
}
return (
<>
This is Parent Component
<ChildComponent
handleParentFun = {(value) => {
console.log("your value -->",value);
handleParentFun(value);
}}
/>
</>
);
}
Child Component
import React from "react";
export default function ChildComponent(props){
return(
<>
This is Child Component
<button onClick={props.handleParentFun("Your Value")}>
Call to Parent Component Function
</button>
</>
);
}

Pass the method from Parent component down as a prop to your Child component.
ie:
export default class Parent extends Component {
state = {
word: ''
}
handleCall = () => {
this.setState({ word: 'bar' })
}
render() {
const { word } = this.state
return <Child handler={this.handleCall} word={word} />
}
}
const Child = ({ handler, word }) => (
<span onClick={handler}>Foo{word}</span>
)

React 16+
Child Component
import React from 'react'
class ChildComponent extends React.Component
{
constructor(props){
super(props);
}
render()
{
return <div>
<button onClick={()=>this.props.greetChild('child')}>Call parent Component</button>
</div>
}
}
export default ChildComponent;
Parent Component
import React from "react";
import ChildComponent from "./childComponent";
class MasterComponent extends React.Component
{
constructor(props)
{
super(props);
this.state={
master:'master',
message:''
}
this.greetHandler=this.greetHandler.bind(this);
}
greetHandler(childName){
if(typeof(childName)=='object')
{
this.setState({
message:`this is ${this.state.master}`
});
}
else
{
this.setState({
message:`this is ${childName}`
});
}
}
render()
{
return <div>
<p> {this.state.message}</p>
<button onClick={this.greetHandler}>Click Me</button>
<ChildComponent greetChild={this.greetHandler}></ChildComponent>
</div>
}
}
export default MasterComponent;

How to use React.cloneElement to pass a function property with a return object?

I'm using react-router which forces me to use React.cloneElement to pass down properties to my Children. I can pass down objects and functions, but my issue is where one of my functions has a return object back up to the parent, which is always undefined. The function triggers in the parent, but it doesn't receive the object I'm passing it from the child.
Here is a jsFiddle of the below example code if anyone wants to edit it https://jsfiddle.net/conor909/gqdfwg6p/
import React from "react";
import ReactDom from "react-dom";
const App = React.createClass({
render() {
return (
<div>
{this.getChildrenWithProps()}
</div>
)
},
getChildrenWithProps() {
return React.Children.map(this.props.children, (child) => {
return React.cloneElement(child, {
myFunction: this.myFunction
});
});
},
// NOTE:
// the idea is that the variable 'newForm' should be sent back up to App, I can log out 'newForm' in the Child, but here in App, it is undefined.
myFunction(newForm) {
console.log(newForm); // => undefined object
}
});
const Child = React.createClass({
propTypes: {
myFunction: React.PropTypes.func,
myForm: React.PropTypes.object
},
render() {
return (
<form className="col-sm-12">
<MyForm
changeForm={this.onChangeForm}
form={this.props.myForm} />
</form>
)
},
onChangeForm(formChanges) {
let newForm = {
...this.props.myForm,
...formChanges
}
// console.log(newForm); => here my newForm object looks fine
this.props.myFunction(newForm);
}
});
const MyForm = React.createClass({
propTypes: {
changeForm: React.PropTypes.func.isRequired
},
render() {
return (
<div>
<Input onChange={this.onChangeForm}>
</div>
)
},
onChangeForm(value) {
this.props.changeForm({ something: value });
}
});