Trying to build a champion Select Screen using React

Question

I am still learning React and i am trying to build a champion(which in this case is name hashiras) selection screen. I am taking data from an array in the react app and i am trying to select one and display a toggle that this champion(hashira) has been chosen. However i am a bit confused on state and have been struggling with trying to display the name of the chosen hashira among the 4 i have in the array. Also my images are not appearing.

What i am trying to obtain is when i click on choose, the top text will display the name of the chosen hashira.

My final goal is to toggle a form to enter the own username after the hashira is chosen which i will try by myself.

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import {render} from 'react-dom';
import {rengokuimg} from './Images/rengokuIMG.png';
import {sanemiimg} from './Images/rengokuIMG.png';
import {shinobuimg} from './Images/rengokuIMG.png';
import {giyuuimg} from './Images/rengokuIMG.png';


let hashiraList=[
    {"name":"Rengoku Kyojiro", "description":"Flame Hashira", "age":20, "element":"Flame","imgsource":rengokuimg,"Choice":"Rengoku Chosen"},
    {"name":"Giyuu Tomioka", "description":"Water Hashira", "age":21, "element":"Water","imgsource":giyuuimg,"Choice":"Giyuu Chosen"},
    {"name":"Sanemi Shinazugawa", "description":"Wind Hashira", "age":22, "element":"Wind","imgsource":sanemiimg,"Choice":"Sanemi Chosen"},
    {"name":"Shinobu Kocho", "description":"Insect Hashira", "age":22, "element":"Poison","imgsource":shinobuimg,"Choice":"Shinobu Chosen"}
]

const Hashira =({name, description,element,age,imgsource,Choice}) => {
    return(
        <section>
            <h2>Name: {name}</h2>
            <p>Description: {description}</p>
            <div><img src={imgsource}/></div>
            <p>Element: {element}</p>

            {/* <button onClick={()=>console.log({name},console.log({age}))}>Choose </button> */}
            <button onClick={()=>console.log({Choice})}>Select the {element} hashira</button>
        </section>
    )
}
const NotSelected=()=>
    <div>
        <h1>No Hashira Selected.</h1>
    </div>


const Selected=()=>
    <div><h2>You have chosen hashira</h2></div>

class HashiraSelect extends React.Component{
    state = {
        Chosen : false,
        formdisplay :false,
        selected:false
    }
    toggleOpenClosed({name}){
        this.setState({
            Chosen: !this.state.Chosen,
            selected: {name}
        })
    }
    render(){
        console.log(this.state)
        const {hashiras} = this.props
        return(
            <div>
                {this.state.selected ? <Selected/> : <NotSelected/>}
                            {/* <h1> Have you chosen a Hashira : {this.state.Chosen ? 'Chosen' : 'Not yet'}</h1> */}

            {hashiras.map(
                (hashira, idx) =>
                 <Hashira 
                 key={idx} 
                 name={hashira.name} 
                 description={hashira.description} 
                 age={hashira.age} 
                 element={hashira.element}
                 Choice={hashira.Choice}
                 imgsource={hashira.imgsource}
                 Selected={this.state.Selected}
                 />
            )}
            {/* <button onClick ={this.toggleOpenClosed}>Choose</button> */}


        </div>
        )
    }
}

{/* <Hashira name="Sanemi" description="The wind Hashira." element="Wind"/> */}

render(

    <HashiraSelect hashiras={hashiraList}/>,


    document.getElementById('root')
)

Thank you once more for the help.

Sandbox link

Answer 1

An onChange handler should be created in HashiraSelect. Pass this handler as a prop to Hashira component. When button is click, pass the selected hashira value to the onChange handler and set it in state.

Check out the WORKING DEMO

const Hashira = ({
  name,
  description,
  element,
  age,
  imgsource,
  Choice,
  onChange
}) => {
  return (
    <div>
      <section>
        <h2>Name: {name}</h2>
        <p>Description: {description}</p>
        {/* <div><img src={rengokuimg}/></div> */}
        <p>Element: {element}</p>

        {/* <button onClick={()=>console.log({name},console.log({age}))}>Choose </button> */}
        <button onClick={() => onChange(Choice)}>
          Select the {element} hashira
        </button>
      </section>
    </div>
  );
};

class HashiraSelect extends React.Component {
  state = {
    Chosen: false,
    formdisplay: false,
    choice: null
  };
  toggleOpenClosed() {
    this.setState({
      Chosen: !this.state.Chosen
    });
  }

  onChange = choice => {
    this.setState({ choice, Chosen: true });
  };
  render() {
    console.log(this.state);
    const { hashiras } = this.props;
    const { choice } = this.state;
    return (
      <div>
        <h1>
          Have you chosen a Hashira : {this.state.Chosen ? "Chosen" : "Not yet"}
        </h1>
        {choice && <h2>{`Hashira Chosen:${choice}`}</h2>}
        {hashiras.map((hashira, idx) => (
          <Hashira
            key={idx}
            name={hashira.name}
            description={hashira.description}
            age={hashira.age}
            element={hashira.element}
            Choice={hashira.Choice}
            onChange={this.onChange}
            //  imgsource={hashira.imgsource}
            Selected={this.state.Selected}
            //  Choice={this.state.Chosen}
          />
        ))}
        {/* <button onClick ={this.toggleOpenClosed}>Choose</button> */}
      </div>
    );
  }
}

//  <Hashira name="Sanemi" description="The wind Hashira." element="Wind"/>

render(
  <HashiraSelect hashiras={hashiraList} />,

  document.getElementById("root")
);