Develop Reference

How can the value go from the Child element to the sister Element in React | JSX

I am taking a date from the drop down date picker and trying to use it in another page so I can cross reference times open for bookings. When the Datepicker selects a date, and The props value is set on the Btnsearch It tries to redirect and seems like it does rerender but the prop value is undefined while the wasSubmit changes to true. Where do I pull this prop from?
I have added what I thought was a router, I set the sate with an attribute this.state.value but that does not seem to fix the issue.
Here is my Date Picker, Btnsearch, Bookingpage
import "./Btnsearch/Btnsearch";
// react plugin used to create datetimepicker
import ReactDatetime from "react-datetime";
import { Redirect } from 'react-router-dom';
import Bookingpage from "./Bookingpage/Bookingpage";
// reactstrap components
import {
FormGroup,
InputGroupAddon,
InputGroupText,
InputGroup,
Col,
Row
} from "reactstrap";
import Btnsearch from "./Btnsearch/Btnsearch";
class Datepicker extends React.Component {
constructor(props) {
super(props);
this.state = {
value: ""
};
//this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleSubmit = event => {
event.preventDefault();
this.setState({wasSubmitted: true});
}
render() {
const { value, wasSubmitted } = this.state;
if (wasSubmitted) {
return <Bookingpage><Redirect value={this.state.value} to='./Bookingpage/Bookingpage' /></Bookingpage>
} else {
return (
<>
<FormGroup>
<InputGroup className="input-group-alternative">
<InputGroupAddon addonType="prepend">
<InputGroupText
>
<i className="ni ni-calendar-grid-58" />
</InputGroupText>
</InputGroupAddon>
<ReactDatetime
value={this.state.value}
onChange={this.handleChange}
inputProps={{
placeholder: "Date Picker Here"
}}
timeFormat={false}
/>
</InputGroup>
</FormGroup>
<form onSubmit={this.handleSubmit}>
<Btnsearch type="submit" value={this.state.value}/>
</form>
</>
);
}
}
}
export default Datepicker;
import '../Datepicker';
class Btnsearch extends React.Component {
render() {
return (
<button onClick={() => console.log(this.props.value)} className="btn btn-success search-card-btn">Search</button>
);
}
};
export default Btnsearch;
import '../Datepicker';
class Bookingpage extends React.Component {
render() {
return(
<div className="bookingPage">
<h1>{this.props.value}</h1>
</div>
);
}
}
export default Bookingpage;
When Select the date and hit the search btn I expect it to redirect to a page Bookingpage that says the value selected. The Actual results are
<div class="App">
<div class="card freesearch-option">
<label><span class="searchTitleTxt">Search For Availability</span>
<div class="bookingPage">
<h1></h1></div>
</label>
</div>
</div>
State
value:
""
wasSubmitted: true
The full project is here https://react-puh2oq.stackblitz.io

I don't see a handleChange function.
So it seems like you are picking a date but not .setState()ing the this.state.value.
<ReactDatetime
value={this.state.value}
// HERE YOU CALL IT, BUT handleChange DOESN'T EXIST.
onChange={this.handleChange}
inputProps={{
placeholder: "Date Picker Here"
}}
timeFormat={false}
/>
Well, a proper handleChange function could be like this:
.
.
.
handleSubmit = event => {
event.preventDefault();
this.setState({wasSubmitted: true});
}
handleChange = e => {
e.preventDefault();
this.setState({ value: e.target.value });
}
render() {
const { value, wasSubmitted } = this.state;
if (wasSubmitted) {
return <Bookingpage><Redirect value={this.state.value} to='./Bookingpage/Bookingpage' /></Bookingpage>
} else {
.
.
.
You don't have to .bind() neither this function nor handleSubmit as long as you use fat arrow syntax.

Passing onChange events through the state

I am creating a form component and I want to be able to pass on change elements per form element and I cannot seem to get it work properly.
I have my LoginComponent
import React from "react";
import './LoginComponent.css';
import FormComponent from '../FormComponent/FormComponent';
class LoginComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
header: "Login",
id: "login-form",
name: "login-form",
items: [
{
element: "input",
type: "email",
id: "lf-email",
name: "lf-email",
value: "",
onChange: this.handleOnChangeEmail.bind(this),
placeholder: "Email",
img: {},
},
{
element: "input",
type: "password",
id: "lf-password",
name: "lf-password",
value: "",
onChange: ,
placeholder: "Password",
img: {},
},
{
element: "checkbox",
id: "lf-remember-me",
name: "lf-remember-me",
value: "lf-remember-me",
onChange: ,
display: "Remember Me",
isSelected: false
}
]
}
}
// Figure out how to pass onChange functions per item in state.
handleOnChangeEmail(e) {
console.log("Email changed");
}
render() {
return (
<div className="LoginComponent">
{/*
Create onSubmit function for submitting the form
Create handle change functions for inputs
*/}
<FormComponent id={ this.state.id } name={ this.state.name } onSubmit="" header={ this.state.header } items={ this.state.items } />
</div>
);
}
}
export default LoginComponent;
As you can see I want to pass in the handle function in the state of the component so I can uniquely handle form inputs. When I run this code though it fails because I cannot pass a function in the state. Is this type of request allowed or able to accomplish in another way?
I know you can pass the bound function to the component directly but the form component is dynamically built based on the state.item array.
Here is my form component
import React from "react";
import './FormComponent.css';
import InputComponent from './InputComponent/InputComponent';
import FormHeaderComponent from './FormHeaderComponent/FormHeaderComponent';
import CheckboxComponent from "./CheckboxComponent/CheckboxComponent";
class FormComponent extends React.Component {
render() {
const formItems = this.props.items.map((item) => {
switch(item.element) {
case "input":
return <InputComponent type={ item.type } id={ item.id } name={ item.name } placeholder={ item.placeholder } value={ item.value } onChange={ item.onChange } />
case "checkbox":
return <CheckboxComponent id={ item.id } name={ item.name } value={ item.value } selected={ item.isSelected } onChange={ item.onChange } display={ item.display } />
default:
return <InputComponent />;
}
});
return (
<form id={ this.props.id } name={ this.props.name }>
<FormHeaderComponent header={ this.props.header } />
{/*
Setup handling of submit functions
Setup handling of onchange function for inputs
*/}
{ formItems }
</form>
);
}
}
export default FormComponent;
As you can see in the formItems I am trying to create the elements with the onChange function from the state passed in. Any help or suggestions would be appreciated. I am well aware also I can just make the form component a component that loads all children passed so you basically build the form in the login component without state but I would prefer that not be the case.

Storing methods in state to be passed to children is usually a bad idea. I propose an alternative.
Consider the onChange function, that will still reside in LoginComponent and will be passed as a prop to the <FormComponent />
The handler is written as such that you'll be able to identify which child component called it, by taking it's name attribute too, eliminating the need to make a unique handler for each input.
LoginComponent:
handleOnChangeEmail(e) {
const { name, value } = e.target;
console.log(`${name} changed to ${value}`);
}
render() {
return (
<div className="LoginComponent">
<FormComponent
id={this.state.id}
name={this.state.name}
onSubmit=""
header={this.state.header}
items={this.state.items}
formOnChange={this.handleOnChangeEmail}
/>
</div>
);
}
Then when you are iterating over and constructing your InputComponent, pass this to it's onChange:
FormComponent:
class FormComponent extends React.Component {
render() {
const formItems = this.props.items.map(item => {
switch (item.element) {
case "input":
return (
<InputComponent
type={item.type}
id={item.id}
name={item.name}
placeholder={item.placeholder}
value={item.value}
onChange={this.props.formOnChange}
/>
);
case "checkbox":
return (
<CheckboxComponent
id={item.id}
name={item.name}
value={item.value}
selected={item.isSelected}
onChange={this.props.formOnChange}
display={item.display}
/>
);
default:
return <InputComponent />;
}
});
return (
<form id={this.props.id} name={this.props.name}>
<FormHeaderComponent header={this.props.header} />
{formItems}
</form>
);
}
}
PS: Don't forget to bind your functions or use arrow functions.

Try implementing same function handleChange to handle all form value change.
React onChange function pass event argument. With event argument perform necessary logic. Do not need onChange key in form object in state.
// use lodash library for array handling.
// yarn add lodash
// import {indexOf} from "lodash"
// using fat arrow will save from binding function in constructor.
handleChange=({target})=> {
const {items} = this.state;
// target.name/id will give the element state can be update as required.
let index = indexOf(items, {name:target.name})
items[index].value = target.value;
this.setState({
items
})
}
// remove handle change from items and just user it for all form value change.
<FormComponent id={ this.state.id } name={ this.state.name } handleChange={this.handleChange} onSubmit="" header={ this.state.header } items={ this.state.items } />

How to rerender React component after modifying its props outside of the component

I have a React application structured like this: App.jsx with 2 components ParentComponentOne.jsx and ParentComponentTwo.jsx. ParentComponentOne.jsx has a component called ChildParentOne.jsx instantiated twice with different props. When clicking on a ChildParentOne.jsx I render the ParentComponentTwo which has inside 2 inputs with the values passed from ChildParentOne and a save button. When clicking on the save button i want to rerender the ChildParentOne component with the new values from the inputs.
App.jsx
class App extends Component {
state = {
show:{
pictureEdit: false
},
imgProp: null
};
childClicked = (props) => {
this.setState(
prevState => ({
show: {
pictureEdit: !prevState.show.pictureEdit,
},
imgProp: props
}))
}
render() {
return (
<div>
<ParentComponentOne childClicked={this.childClicked} />
{this.state.show.pictureEdit ? <ParentComponentTwo imgProp={this.state.imgProp} /> : null}
</div>
);
}
}
export default App;
ParentComponentOne.jsx
class ParentComponentOne extends Component {
imagePopUp = (props) => {
this.props.childClicked(props);
}
render() {
return (
<div>
<ChildParentOne onBtnClick={this.imagePopUp} imgW={340} imgH={83} />
<div>some content</div>
<ChildParentOne onBtnClick={this.imagePopUp} imgW={30} imgH={30} />
</div>
);
}
}
export default ParentComponentOne ;
ChildParentOne.jsx
class ChildParentOne extends Component {
clickFunction = (e) =>{
e.preventDefault();
e.stopPropagation();
this.props.onBtnClick(this.props);
}
render() {
return (
<div onClick={this.clickFunction}>
<img src='some_src' style={{width: this.props.imgW, height: this.props.imgH}}>
</div>
);
}
}
export default ChildParentOne ;
ParentComponentTwo.jsx
class ParentComponentTwo extends Component {
state = {
imgH: this.props.imgProp.imgH,
imgW: this.props.imgProp.imgW,
}
handleInputChange = (event) => {
const target = event.target;
const value = target.value;
const name = target.name;
this.setState({
[name]: value
});
}
handleSubmit = (e) => {
e.preventDefault();
//submit logic
}
render() {
return (
<div>
<form onSubmit={this.handleSubmit}>
<input
name='imgH'
value={this.state.imgH}
onChange={this.handleInputChange}
type="number"
placeholder="Image Height"
style={{ width: '100%' }} />
<br />
<input
name='imgW'
value={this.state.imgW}
onChange={this.handleInputChange}
type="number"
placeholder="Image width"
style={{ width: '100%' }} />
<br />
<br />
<button type='submit' className="btn btn-success">Save</button>
</form>
</div>
);
}
}
export default ParentComponentTwo;
TLDR:
React Application
App.jsx - ParentComponentOne.jsx - ChildParentOne.jsx
- ParentComponentTwo.js
onClick ChildParentOne -(send the props)-> ParentComponentOne -(ChildParentOne Props)-> App -(ChildParentOne Props)-> ParentComponentTwo
ParentComponentTwo sets the values recieved on state which are binded to input values.
After I enter new values in the inputs how do i rerender the clicked ChildParentOne component with the new width and height.

When you change the state in your App component, it should trigger a re-rendering of your ChildParentOne automatically.
But since your are setting states, that references to the props, it doesn't get updated as you would think.
In order to get your code to work you need to implement the componentWillReceiveProps method to ParentComponentTwo
componentWillReceiveProps(nextProps) {
if(this.props.imgProp !== nextProps.imgProp) // Check if imgProp differs...
{
this.setState({
imgH: nextProps.imgProps.imgH,
imgW: nextProps.imgProps.imgW
})
}
}

React - Can A Child Component Send Value Back To Parent Form

The InputField & Button are custom components that go into a form to create a form. My issue is how do I send the data back up to form so that on button click, I can fire ajax on the form with data (username & password):
export default auth.authApi(
class SignUpViaEmail extends Component{
constructor(props){
super(props);
this.state = {
email : "",
password : ""
};
this.storeEmail = this.storeEmail.bind( this );
this.storePassword = this.storePassword.bind( this );
}
storeEmail(e){
this.setState({ email : e.target.value });
}
storePassword(e){
this.setState({ password : e.target.value });
}
handleSignUp(){
this.props.handleSignUp(this.state);
}
render(){
return(
<div className="pageContainer">
<form action="" method="post">
<InputField labelClass = "label"
labelText = "Username"
inputId = "signUp_username"
inputType = "email"
inputPlaceholder = "registered email"
inputClass = "input" />
<Button btnClass = "btnClass"
btnLabel = "Submit"
onClickEvent = { handleSignUp } />
</form>
</div>
);
}
}
);
Or Is it not recommended & I should not create custom child components within the form?
child component => InputField
import React,
{ Component } from "react";
export class InputField extends Component{
constructor( props ){
super( props );
this.state = {
value : ""
};
this.onUserInput = this.onUserInput.bind( this );
}
onUserInput( e ){
this.setState({ value : e.target.value });
this.props.storeInParentState({[ this.props.inputType ] : e.target.value });
}
render(){
return <div className = "">
<label htmlFor = {this.props.inputId}
className = {this.props.labelClass}>
{this.props.labelText}
</label>
<input id = {this.props.inputId}
type = {this.props.inputType}
onChange = {this.onUserInput} />
<span className = {this.props.validationClass}>
{ this.props.validationNotice }
</span>
</div>;
}
}
Error : I get the error e.target is undefined on the parent storeEmail func.

React's one-way data-binding model means that child components cannot send back values to parent components unless explicitly allowed to do so. The React way of doing this is to pass down a callback to the child component (see Facebook's "Forms" guide).
class Parent extends Component {
constructor() {
this.state = {
value: ''
};
}
//...
handleChangeValue = event => this.setState({value: event.target.value});
//...
render() {
return (
<Child
value={this.state.value}
onChangeValue={this.handleChangeValue}
/>
);
}
}
class Child extends Component {
//...
render() {
return (
<input
type="text"
value={this.props.value}
onChange={this.props.onChangeValue}
/>
);
}
}
Take note that the parent component handles the state, while the child component only handles displaying. Facebook's "Lifting State Up" guide is a good resource for learning how to do this.
This way, all data lives within the parent component (in state), and child components are only given a way to update that data (callbacks passed down as props). Now your problem is resolved: your parent component has access to all the data it needs (since the data is stored in state), but your child components are in charge of binding the data to their own individual elements, such as <input> tags.
Addendum
In response to this comment:
What if we render a list of the child component? Using this single source of truth in Lifting state up technique will let the parent controls all the state of all the child inputs right? So how can we access each of the value input in the child component to (which is rendered as list) from the parent component?
For this case, you may map a child component for each element in the list. For example:
class Parent extends Component {
//...
handleChangeListValue = index => event => {
this.setState({
list: this.state.list
.map((element, i) => i === index ? event.target.value : element)
});
}
//...
render() {
return this.state.list.map((element, i) => (
<Child
value={element}
onChangeValue={this.handleChangeListValue(i)}
/>
));
P.S. Disclaimer: above code examples are only for illustrative purposes of the concept in question (Lifting State Up), and reflect the state of React code at the time of answering. Other questions about the code such as immutable vs mutable array updates, static vs dynamically generated functions, stateful vs pure components, and class-based vs hooks-based stateful components are better off asked as a separate question altogether.

React class component
Parent.js
import React, { Component } from 'react';
import Child from './child'
class Parent extends Component {
state = {
value: ''
}
onChangeValueHandler = (val) => {
this.setState({ value: val.target.value })
}
render() {
const { value } = this.state;
return (
<div>
<p> the value is : {value} </p>
<Child value={value} onChangeValue={this.onChangeValueHandler} />
</div>
);
}
}
export default Parent;
Child.js
import React, { Component } from 'react';
class Child extends Component {
render() {
const { value , onChangeValue } = this.props;
return (
<div>
<input type="text" value={value} onChange={onChangeValue}/>
</div>
);
}
}
export default Child;
React hooks
Parent.js
import { useState } from "react";
import Child from "./child";
export default function Parent() {
const [value, changeValue] = useState("");
return (
<div>
<h1>{value}</h1>
<Child inputValue={value} onInputValueChange={changeValue} />
</div>
);
}
Child.js
export default function Child(props) {
return (
<div>
<input
type="text"
value={props.inputValue}
onChange={(e) => props.onInputValueChange(e.target.value)}/>
</div>
);
}

Parent.js
import SearchBar from "./components/SearchBar";
function App() {
const handleSubmit = (term) => {
//Log user input
console.log(term);
};
return (
<div>
<SearchBar onPressingEnter={handleSubmit} />
</div>
);
}
export default App;
Child.js
import { useState } from "react";
function SearchBar({ onPressingEnter }) {
const [UserSearch, setname] = useState("[]");
/* The handleChange() function to set a new state for input */
const handleChange = (e) => {
setname(e.target.value);
};
const onHandleSubmit = (event) => {
//prevent form from making a http request
event.preventDefault();
onPressingEnter(UserSearch);
};
return (
<div>
<form onSubmit={onHandleSubmit}>
<input
type="search"
id="mySearch"
value={UserSearch}
onChange={handleChange}
name="q"
placeholder="Search the site…"
required
/>
</form>
</div>
);
}
export default SearchBar;

You can add a "ref name" in your InputField so you can call some function from it, like:
<InputField
ref="userInput"
labelClass = "label"
labelText = "Username"
inputId = "signUp_username"
inputType = "email"
inputPlaceholder = "registered email"
inputClass = "input" />
So you can access it using refs:
this.refs.userInput.getUsernamePassword();
Where getUsernamePassword function would be inside the InputField component, and with the return you can set the state and call your props.handleSignUp

How to stop re-rendering all Childs in React render function when I change just one child value?

I have some Card (more than 10 Card component) in a Cards component and each Card has a form with more than 10 textField components. When I'm typing in textFields, It has delay between type and update value of textField. After spending more than 2 days, I found my problem. I think it's related to re-rendering all Childs (all Card components) when I set my value in statein value update... .
I want to know where am I wrong? If my codes is standard, is there any way to stop re-rendering all Childs after changing state for just one textField?
My codes are like as follow:
MainComponent:
export default class MainComponent extends Component {
constructor(props) {
super(props);
this.state = {
value : {}
};
}
static PropTypes = {
results: PropTypes.array.isRequired
};
handleChange(ref, e) {
this.state.value[ref] = e;
this.setState(this.state);
}
render() {
const { results } = this.props;
<Cards>
{
results.map((result, index) => {
var ref_taxtfield1 = result.id + "taxtfield1";
var ref_taxtfield2 = result.id + "taxtfield2";
var ref_taxtfield3 = result.id + "taxtfield3";
var ref_taxtfield4 = result.id + "taxtfield4";
var ref_taxtfield5 = result.id + "taxtfield5";
return <Card key={ result.id } style={ styles.card }>
<Form>
<div style={ styles.innerContainer }>
<Textfield
name="taxtfield1"
label="My Label 1"
ref={ref_taxtfield1}
onValueChange={this.handleChange.bind(this, ref_taxtfield1)}
value={this.state.value[ref_taxtfield1]}
/>
<Textfield
name="taxtfield2"
label="My Label 2"
ref={ref_taxtfield2}
onValueChange={this.handleChange.bind(this, ref_taxtfield2)}
value={this.state.value[ref_taxtfield2]}
/>
<Textfield
name="taxtfield3"
label="My Label 3"
ref={ref_taxtfield3}
onValueChange={this.handleChange.bind(this, ref_taxtfield3)}
value={this.state.value[ref_taxtfield3]}
/>
<Textfield
name="taxtfield4"
label="My Label 4"
ref={ref_taxtfield4}
onValueChange={this.handleChange.bind(this, ref_taxtfield4)}
value={this.state.value[ref_taxtfield4]}
/>
<Textfield
name="taxtfield5"
label="My Label 5"
ref={ref_taxtfield5}
onValueChange={this.handleChange.bind(this, ref_taxtfield5)}
value={this.state.value[ref_taxtfield5]}
/>
</div>
</Form>
</Card>})}
</Cards>
}
}
My TextField Component
export default class Textfield extends Input {
static defaultProps = {
initialCount: 0,
value: "",
defaultValue: "",
onValueChange: null,
label: ""
};
state = { focused: false };
onChange = this.onChange.bind(this);
onChange(e) {
if(this.props.onValueChange){
this.props.onValueChange(e.target.value);
}
}
handleOnBlur = this.handleOnBlur.bind(this);
handleOnBlur(e){
this.setState({focused: false});
if(this.props.onBlur){
this.props.onBlur(e);
}
}
render() {
const { focused } = this.state;
const { value, disabled } = this.props;
return (
<div>
<label>{this.props.label}</label>
<input
{ ...this.inputProps() }
type="text"
placeholder={this.props.placeholder}
defaultValue={this.props.defaultValue}
onChange={this.onChange}
onBlur={this.handleOnBlur}
value={ isCurrency ? formatData.currency(value) : value}
disabled={disabled}
/>
</div>
)
}
}
My Card and Cards Component
export class Cards extends Component {
render() {
const { children, ...props } = this.props;
return <div {...props} >{ children }</div>;
}
};
export class Card extends Component {
render() {
const { ...props } = this.props;
return <div {...props} } />
}
}
I use ES6 syntax and also remove all style tags from my code to simplify.

You are passing a new function to every Textfield component on render:
onValueChange={this.handleChange.bind(this, ref_taxtfield1)}
.bind returns a new function every time, causing every Textfield to render on each update.
Two possible solutions:
Don't use .bind inside .render. .bind the method once in the constructor and let Textfield pass an identifier to this.props.onValueChange.
Implement shouldComponentUpdate in Textfield, returning false if only this.props.onValueChange changed.