Show component in block ReactJS

Question

I have 2 buttons and div info. In the state I have recorded an array within which the key and the component. When I click on one of the buttons, I want the component to be displayed in the info div. Where is the mistake?

import React, { Component } from 'react';
import Donald from '/.Donald';
import John from '/.John';

class Names extends Component {
    state = {
    array :[
      {keys:1, name:<Donald/> },
      {keys:2, name:<John/> }]
    };



  searchName = (keys)=>{    
    const arrr =  this.state.array.filter(item =>  item.keys === keys);
    this.setState({array : arrr})
    return this.state.arrr;
  }  

  searchInfo =()=>{
    const cont = this.state.array.filter(item => item.name === this.state.name);
    return cont;
  }


  render() {
    return(
      <div>
        <div className="info">{this.searchInfo(this.state.name)}</div>
        <div>
          <button onClick={ () => this.searchName(1) }>My name Donald</button>
          <button onClick={ () => this.searchName(2)}>My name John</button>
        </div>
      </div>
    )
  }
}

export default Names;

Zohaib Ijaz · Accepted Answer · 2019-04-29 22:42:26Z

1

First of all, this.state.name is undefined and is not assigned any value. Secondly, you are complicating simply things. Simple use an Object with keys as 1, 2 and values as rendered components like in your scenario

import React, { Component } from 'react';
import Donald from '/.Donald';
import John from '/.John';

class Names extends Component {
    state = {
      key: 1
    };
    
    components =  {
        1: <Donald/>,
        2:<John/>
    };
    
    
   showComponent = key => {
     this.setState({ key });
   };

  render() {
    return(
      <div>
        <div className="info">{this.components[this.state.key]}</div>
        <div>
          <button onClick={ () => this.showComponent(1) }>My name Donald</button>
          <button onClick={ () => this.showComponent(2)}>My name John</button>
        </div>
      </div>
    )
  }
}

export default Names;

edited Apr 29, 2019 at 22:42

answered Apr 29, 2019 at 22:32

Zohaib Ijaz

23k7 gold badges43 silver badges63 bronze badges

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

Comments

Mikhail Sidorov · Accepted Answer · 2019-04-29 22:38:10Z

0

import React, { Component } from 'react'
import Donald from '/.Donald'
import John from '/.John'

class Names extends Component {
  state = {
    showDonald: false,
    showJohn: false
  }

  render() {
    return (
      <div>
        <div className="info">
          {this.state.showDonald ? <Donald /> : null}
          {this.state.showJohn ? <John /> : null}</div>
        <div>
          <button onClick={() => this.setState({ showDonald: true, showJohn: false })}>My name Donald</button>
          <button onClick={() => this.setState({ showJohn: true, showDonald: false })}>My name John</button>
        </div>
      </div>
    )
  }
}

edited Apr 29, 2019 at 22:38

answered Apr 29, 2019 at 22:32

Mikhail Sidorov

1,43413 silver badges17 bronze badges

Collectives™ on Stack Overflow

Show component in block 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