CODEWITHSUNDEEP
reactjs
cryptomania14
cryptomania14

Reputation: 93

React How to return div and variable value for another component

How to return my div and my variable view to another component? I can't do 2 returns?

class Toolbar extends Component {
    constructor(){
        super();
        this.state = {
          view:''
        }
      }
  
      render(){
        return(
          <div className="button-toolbar">
            <button className="button" onClick={() => this.setState({view: 1})}>1</button>
            <button className="button" onClick={() => this.setState({view: 2})}>2</button>
            <button className="button" onClick={() => this.setState({view: 3})}>3</button>
            <button className="button">Wallet</button>          
          </div>
        )
         
        return {this.state.view}

I want to return the value of my button to send it into another component

App.js :

render() {
    return (
      <div className="App">
        <Toolbar></Toolbar>
        <View view=/*Return toolbar value*/></View>
      </div>
    );
  }

Upvotes: 3

Views: 505

Answers (1)

Nick
Nick

Reputation: 16576

If you want the this.state.view to show alongside the buttons, you can simply include it in the same render return:

class Toolbar extends Component {
    constructor(){
        super();
        this.state = {
          view:''
        }
      }
  
      render(){
        return(
          <div className="button-toolbar">
            <button className="button" onClick={() => this.setState({view: 1})}>1</button>
            <button className="button" onClick={() => this.setState({view: 2})}>2</button>
            <button className="button" onClick={() => this.setState({view: 3})}>3</button>
            <button className="button">Wallet</button>
            {this.state.view}       
          </div>
        )
    }
}

If you want to not show the buttons once the view value is set, you can just return early if a condition is met.

class Toolbar extends Component {
    constructor(){
        super();
        this.state = {
          view:''
        }
      }
  
      render(){
        if (this.state.view) {
          return this.state.view;
        }

        return (
          <div className="button-toolbar">
            <button className="button" onClick={() => this.setState({view: 1})}>1</button>
            <button className="button" onClick={() => this.setState({view: 2})}>2</button>
            <button className="button" onClick={() => this.setState({view: 3})}>3</button>
            <button className="button">Wallet</button>  
          </div>
        )
    }
}

Edit: Sharing state between components

If you need to share this state between a sibling component, you should generally raise the state up to the nearest common parent. In this case, that's App.js. It might look like this:

App.js

class App extends Component {
  constructor() {
    this.state = { view: "" };
    this.setView = this.setView.bind(this);
  }

  setView(view) {
    this.setState({ view });
  }

  render() {
    return (
      <div className="App">
        <Toolbar setView={this.setView}></Toolbar>
        <View view={view}></View>
      </div>
    );
  }
}

And then your Toolbar component wouldn't need state anymore, but would use this.props.setView to set the view on the parent component.

Toolbar.js

class Toolbar extends Component {
      render(){
        return(
          <div className="button-toolbar">
            <button className="button" onClick={() => this.props.setView(1)}>1</button>
            <button className="button" onClick={() => this.props.setView(2)}>2</button>
            <button className="button" onClick={() => this.props.setView(3)}>3</button>
            <button className="button">Wallet</button>          
          </div>
        )
    }
}

Upvotes: 3

Related Questions