Pass variable from one component to another ReactJS

Question

I am woking on a sample ReactJS application, where I want to pass a variable from one component to another.

class Layout extends React.Component{
    constructor(props) {
        super(props);
        this.state = {keyword: ''};
    }
    render() {
        return (
                 <div className="wrapper">
                   <Search />
                   <Listing />
                  </div>
        );
    }
};

ReactDOM.render(
    <Layout />, app
);

In the above code, I want to pass a variable from <Search /> component to <Listing /> component.

What event in Search happens at the time you want to pass the variable to Listing? — Davin Tryon
– Davin Tryon, Commented Feb 23, 2017 at 15:41
very poor formating of code :). There are different ways to do this redux, events, etc. Little bit more information about your code will be helpful. — Martin
– Martin, Commented Feb 23, 2017 at 15:42
@DavinTryon <search /> component is actually a form with and text input to enter the keyword, I want to pass the variable onSubmit of the form action. — Rijo Joy
– Rijo Joy, Commented Feb 23, 2017 at 15:54
So, you need an onSubmit prop for Search and then handle the onSubmit in Layout. @Andrew's answer below. — Davin Tryon
– Davin Tryon, Commented Feb 23, 2017 at 16:03

Kunal · Accepted Answer · 2017-02-23 15:45:07Z

1

Rlijo you'd pass props to components as follows:

<Search paramA={someParam} paramB={anotherParam} /> and to use the props within the Search component you'd call this.props.paramA (if using classes).

The way you've got the components setup, you wouldn't be able to share the state from the Search component (i.e. the object in this.state within Search) with the Listing component. There are libraries such as Redux designed to solve problems of shared state across components.

Props (or variables or params) flow downward so you'd need to provide shared props from a parent component. See you could provide this.state.keyword as a prop to both Search and Listing as these two components sit inside this parent component.

answered Feb 23, 2017 at 15:45

Kunal

1,2962 gold badges12 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Andrii Starusiev · Accepted Answer · 2017-02-23 16:00:59Z

1

You can make it with function like

class Layout extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            keyword: '',
            yourVariable: null
        };
    }
    sendVariable(newValue) {
        this.setState({ yourVariable: newValue });
    }
    render() {

        return (
            <div className="wrapper">
                <Search onChange={this.sendVariable.bind(this)} />
                <Listing sendValue={this.state.yourVariable} />
            </div>
        );
    }
};

class Search extends React.Component{
    render(){
        let variable = "";
        return <div onClick={this.porps.onChange(variable)}></div>;
    }
}

Or use React-redux.

edited Feb 23, 2017 at 16:00

answered Feb 23, 2017 at 15:44

Andrii Starusiev

7,7842 gold badges31 silver badges40 bronze badges

Collectives™ on Stack Overflow

Pass variable from one component to another ReactJS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related