Aleksander  Sołop Aleksander Sołop - 3 years ago 91
React JSX Question

How to make dependence between two form filters in ReactJS

I have three classes in my

ReactJS
app. Here they are :

class FirstFilter extends React.Component {
constructor() {
super();
this.state = {
val1: ''
};
this.handleChange = this.handleChange.bind(this);
}

handleChange(event) {
this.setState({value: event.target.value});
}

render() {
return (
<Label>
<Input type="select" value={this.state.value} onChange={this.props.handleChange}>
<option disabled selected value>Select plox</option>
<option value='Firdt'>First</option>
<option value='Second'>Second</option>
</Input>
</Label>
);
}
}

class SecondFilter extends React.Component {
constructor() {
super();
this.state = {
val2: ''
};
this.handleChange = this.handleChange.bind(this);
}

handleChange(event) {
this.setState({value: event.target.val2});
}

render() {
return (
<Label>
<Input type="search" placeholder="Print somthing" value={this.state.value} onChange={this.props.handleChange}>
</Input>
</Label>
);
}
}

class Main extends React.Component {
constructor() {
super();
this.state = {
val1: '',
val2: ''
};

this.handleChangeVal1 = this.handleChangeVal1.bind(this);
this.handleChangeVal2 = this.handleChangeVal2.bind(this);
}
handleChangeUUID(event) {
this.setState({val1: event.target.value.toLowerCase()});
}
handleChangeOrigin(event) {
this.setState({val2: event.target.value.toLowerCase()});
}

render() {
return (
<div>
<Form inline>
<FormGroup>
<div>
<UuidRow handleChange = {this.handleChangeVal1} />
</div>
<div>
<OriginRow handleChange = {this.handleChangeVal2} />
</div>
</FormGroup>
</Form>
</div>
);
}
}


I want make
SearchField
from second filter empty when i check whatever in my
DropDownList
from first filter. When i only change value in my
Main
it's still leave typed text there. Maybe I doing something wrong and didn't understand basic hierarchy?

Answer Source

You should pass props to your child component, SearchField, when the state of the parent, Main, has been updated by the callback invoked by the DropDownList. The code in your example isn't consistent, so I can't guess what I need to change to help you, but here is a very basic example of how setting state in the parent via a callback event handler passed to one child (text input) can be used to set props on the second child (text area):

https://codesandbox.io/s/BLwl1y6j2

main.js

import React, { Component } from 'react';
import { render } from 'react-dom';


import FirstChild from './FirstChild';
import SecondChild from './SecondChild';

class Main extends Component {
    constructor(props) {
        super(props);
        this.state = {
            val1: '',
        };
    }
    // callback to pass as prop to child element text input
    handleChangeVal1 = (event) => {
        // sets parent state
        this.setState({val1: event.target.value.toLowerCase()});
    }

    render() {
        return (
            <div>
                <FirstChild handleChange = { this.handleChangeVal1 } value={ this.state.val1 }/>
                <SecondChild value={ this.state.val1 }/>
            </div>
        );
    }
}


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

FirstChild.js

import React, {Component } from 'react';

class FirstChild extends Component {
    // input calls handleChange callback passed in props to modify parent component state
    render() {
        console.log(this.props.value);
        return (
            <input type="text" value={this.props.value} onChange={this.props.handleChange}/>
        );
    }
}

export default FirstChild;

SecondChild.js

    import React, { Component } from 'react';

class SecondChild extends Component {
    // render text area with value passed in props
    render() {
        console.log(this.props.value);
        return (
            <textarea value={this.props.value} onChange={this.props.handleChange}/>
        );
    }
}

export default SecondChild;
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download