Trying to build a champion Select Screen using React - reactjs

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")
);