score:2

Accepted answer

below is an example how button could send some data to component info when they are related as siblings, e.g.

         app
          |   
          |   
  --------|--------
  |               |
  |               |
button          info

code:

 

class app extends react.component {
  state = {
    // now the state is duplicated because clickcounter lives both
    // inside button and app. you could just leave the clickcounter in
    // app and remove it from button. then you would also pass the
    // clickcounter to button as props as you pass it to info.
    // this way state would not be duplicated and in general it is advised
    // in react to not duplicate state.
    clickcounter: 0
  };

  render() {
    return (
      <div>
        <button
          clickhandler={cc => {
            this.setstate({ clickcounter: cc });
          }}
        />
        <info counter={this.state.clickcounter} />
      </div>
    );
  }
}

class info extends react.component {
  render() {
    return (
      <div>
        <p>info: {this.props.counter}</p>
      </div>
    );
  }
}

class button extends react.component {
  state = {
    clickcounter: 0
  };

  handleclick = () => {
    this.props.clickhandler(this.state.clickcounter + 1);

    this.setstate(prevstate => {
      return { clickcounter: prevstate.clickcounter + 1 };
    });
  };

  render() {
    return (
      <div>
        <button onclick={this.handleclick}>click</button>
        <p>clicks: {this.state.clickcounter}</p>
      </div>
    );
  }
}

const rootelement = document.getelementbyid("root");
reactdom.render(<app />, rootelement);
<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>


for other scenarios, refer to this.

score:0

what do you want here can be done with lifting state up in react. you can't pass any data to siblings without lifting the state up or using some global store solutions like redux.

  • lift your state up to a parent component.
  • since you will use this state, define a function to be used here.
  • refactor your other components as dumb ones since you won't need any state there. of course, if you plan to use other states related to those components you can use any state there, but it is not necessary for this one.
  • pass your click handler as a prop to your button component, so you can change the state.
  • pass the related data where do you want to show your state.

class app extends react.component {
  state = {
    clickcounter: 0,
  };

  handleclick = () =>
    this.setstate( prevstate => ( {
      clickcounter: prevstate.clickcounter + 1,
    } ) );

  render() {
    const { clickcounter } = this.state;
    return (
      <div>
        <button onclick={this.handleclick}>click</button>
        <p>clicks data in parent: {clickcounter}</p>
        <lvlchecker clickcounter={clickcounter} />
      </div>
    );
  }
}

const button = props => (
  <div>
    <button onclick={props.onclick}>click</button>
  </div>
);

const lvlchecker = props => (
  <div>clicks data in lvlchecker: {props.clickcounter}</div>
);

reactdom.render(
  <app />,
  document.getelementbyid("root")
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>


Related Query

More Query from same tag