CODEWITHSUNDEEP
reactjs
ATT
ATT

Reputation: 5

React passing props to child and back to parent

My current structure is like this:

 state={
activetab=1,
activetab2=2}

 <child1 activetab={activetab}/>
 <child2 activetab2={activetab2}/>

And I would like when the user changes the active tab from child 2 to update the state on the parent component, and then also handle the change on the child1 component.

child 1 code :

render() {
const activetab=this.props;

this.showimage1 = () => {
  if (activetab === 1) {
    return (

        <img src={slide1} alt='' /> 
    )
  } else null;
}
 return (
  <div>
      {this.showimage1()}
  </div>

child 2 code : 

   constructor (props) {
   super(props)
   this.changetab= this.changetab.bind(this)
   this.state={
   activetab:1}
   }


  render () {
  const activetab2=this.props;
   changetab(tab) {
if (this.state.activeTab !== tab) {
  this.setState({
    activeTab: tab
  })
}
}
return(
 <div>
 <button  onClick={() => {
          this.changetab(1)
        }}
  >tab1 </button>
  </div>

So as you can see I want when the user changes the current tab from child 2 to pass the props in my parent component so that the child1 component knows which image to show depending on the tab. Anyone knows how to do it without rewriting everything in a single component?

Upvotes: 0

Views: 1736

Answers (3)

Kielstra
Kielstra

Reputation: 535

You can wrap the components in a parent component. Then you can pass a function from the parent to child 2 by attaching it to a prop. Child 2 can then call this function on a change.

In the parent:

render() {
    const someFunction = (someVariable) => {
        // do something
    }

    return(
        <child2 somePropName={ this.someFunction } />
    )
}

edit: removed .bind() from this example

Upvotes: 0

user-9725874
user-9725874

Reputation: 871

Create a main component that renders the two component child 1 and 2 create only 1 source of truth means only 1 state to be pass to the child components as props.

  export class MainComponent extends Component {

    constructor (props) {
       super(props)
       this.changetab = this.changetab.bind(this)
         this.state={
           activetab: 0
         }
       }

       changetab(tab) {
         if (this.state.activeTab !== tab) {
         this.setState({
             activeTab: tab
         })
       }


       render() {
         return (
           <div>
             <ChildOne activetab={this.state.activetab} />
             <ChildTwo activetab={this.state.activetab} changetab={this.changetab} />
           </div>
         )
       }
   }



    // ChildOne Component pass state activetab as props

        render() {
        const { activetab } = this.props;

        this.showimage1 = () => {
          if (activetab === 1) {
            return (

                <img src={slide1} alt='' /> 
            )
          } else null;
        }
         return (
          <div>
              {this.showimage1()}
          </div>


    // ChildTwo Component


    render () {
    const { activetab, changetab } = this.props;

    return(
     <div>
     <button  onClick={() => {
              this.changetab(1)
            }}
      >tab1 </button>
      </div>

Upvotes: 1

Victor Jozwicki
Victor Jozwicki

Reputation: 720

The parent component must have 2 function handlechange that you pass to your childs.

Will look something like that

    // Parent
class Parent extends React.Component {
  // Constructor
  constructor(props) {
    this.state = {
      child1: 1,
      child2: 0
    };
  }

  handleChangeChild1(state) {
    this.setState({ child1: state });
  }

  handleChangeChild2(state) {
    this.setState({ child2: state });
  }

  render() {
    return (
      <div>
        <Child1 onXChange={this.handleChangeChild1} />
        <Child2 onYChange={this.handleChangeChild2} />
      </div>
    );
  }
}

And in the children you do

class Child extends React.Component {
   constructor(props) {
     super(props)
   }

    handleChange(e) = () => {
    this.props.onXChange
    }

    render() {
      return (
          <input onChange={this.handleChange} />
      )
    }
}

I recommend you read the doc

Upvotes: 0

Related Questions