Passing props from component to component | React

Question

I want to pass the props or function of an main component to child component to work. totally i need to pass the props over three component to reach its child component. Below is my code, which not working properly. I think, my code will say, what i want to achieve.

If I want to achieve the same thing in single component, it works well. But, when i try to break into different components, i couldn't make it. I making mistake, while passing props.

Thanks In Advance.

/**Home Component**/ class Home extends Component { constructor(props) { super(props); this.state = { value: null, componentToRender: null //tells switch which component to render }; this.renderComponent = this.renderComponent.bind(this) }; handleEvent = (button) => { this.setState({value: button}); }; handleClick = () => { this.setState({componentToRender: this.state.value})//take the // currently selected component and make it the component to render }; //extract the switch statement to a method of its own renderComponent() { switch (this.state.componentToRender) { case 0: return 'cool'; case 1: return 'not cool'; case 2: return 'medium cool'; default: return <ComponentOne toRender={this.state.componentToRender} />; } } render() { return ( <div> {this.renderComponent()} </div> ); } } export default Home; /**Component one***/ import ComponentTwo from './ComponentTwo.js' class ComponentOne extends Component { render(){ return ( <ComponentTwo toRender={this.state.componentToRender}/> ); } } export default ComponentOne; /**Component two***/ import ComponentThree from './ComponentThree.js' class ComponentTwo extends Component { render(){ return ( <ComponentThree toRender={this.state.componentToRender}/> ); } } export default ComponentTwo; /**Component three***/ class ComponentThree extends Component { constructor(props){ super(props); this.state = { value: null, }; }; handleEvent = (button) => { this.setState({value: button}); }; handleClick = () => { this.setState({componentToRender: this.state.value}); }; render(){ return ( <div > <button onClick={() => this.handleEvent(0)}>Component One</button> <button onClick={() => this.handleEvent(1)}>Component Two</button> <button onClick={() => this.handleEvent(2)}>Component three</button> <button onClick={() => this.handleEvent(3)}>Component Four</button> <button variant="contained" onClick={this.handleClick}> Register Now </button> </div> ); } } export default Componentthree;

Joe Clay · Accepted Answer · 2019-02-25 09:41:18Z

ComponentThree is setting its own state, not the state of Home. Since nothing changes the state of Home, it will always render the same thing.

If you want to update the state of a parent component from within a child component, you must pass down the update callback as a prop. In this case, you'd need to pass the handleClick down from Home to ComponentThree, and then use that as the click handler for the buttons.

Also, you're trying to read componentToRender from this.state in your child components - you need to use this.props, as you're passing the values down as props.

It's also worth noting that a React Context can be useful when trying to make state available to deeply nested components - that said, they're not something you should overuse, and I'd recommend getting the hang of passing things around as props before trying to dive in to using Contexts.

Collectives™ on Stack Overflow

Passing props from component to component | React

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related