Change state of another component in React - reactjs

Question

As of now, I have a class generating all the list for a component that will be called multiple times. However is it possible for the user to only select one item with the same ID?
class Skills extends Component {
constructor(props) {
super(props);
this.img = props.src
this.name = props.name
}
render() {
return (
<React.Fragment>
<div>
<Row>
<Image src={this.img} style={skillIcon} rounded />
<div>
<h4>{this.name}</h4>
<ul className="sul">
<li id="lvl 1">1</li>
<li id="lvl 2">2</li>
<li id="lvl 3">3</li>
<li id="lvl 4">4</li>
<li id="lvl 5">5</li>
<li id="lvl 6">6</li>
<li id="lvl 7">7</li>
<li id="lvl 8">8</li>
<li id="lvl 9">9</li>
<li id="lvl 10">10</li>
<li id="lvl 11">11</li>
<li id="lvl 12">12</li>
<li id="lvl 13">13</li>
<li id="lvl 14">14</li>
<li id="lvl 15">15</li>
</ul>
</div>
</Row>
</div>
</React.Fragment>
);
}
}
For example, if li with id lvl 1 is selected, the next time someone clicks on another lvl 1 li of the same regenerated component, the previous selection would be deselected.

Answer 1

You need to store user selection in state and update state when user selected another item.
State can be handled in two ways.
Classic Class components way
// its better to have a array with levels
const levels = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]
class Skills extends Component {
constructor(props) {
super(props);
this.state = {
selection:null
}
this.img = props.src
this.name = props.name
}
render() {
const {selection} = this.state
return (
<React.Fragment>
<div>
<Row>
<Image src={this.img} style={skillIcon} rounded />
<div>
<h4>{this.name}</h4>
<ul className="sul">
{levels.map((level) => {
const isSelected = selection === level;
return (
<li
id={`lvl ${level}`}
key={level}
onClick={() => setSelection(level)}
style={{
padding: isSelected ? 10 : 2,
backgroundColor: isSelected ? 'red' : 'white',
}}
>
{level}
</li>
);
})}
</ul>
</div>
</Row>
</div>
</React.Fragment>
);
}
}
new functional hooks way
function Skills() {
const [selection, setSelection] = useState(null);
return (
<>
<div>
<img src={img} />
<div>
<h4>{name}</h4>
<ul className="sul">
{levels.map((level) => {
const isSelected = selection === level;
return (
<li
id={`lvl ${level}`}
key={level}
onClick={() => setSelection(level)}
style={{
padding: isSelected ? 10 : 2,
backgroundColor: isSelected ? 'red' : 'white',
}}
>
{level}
</li>
);
})}
</ul>
</div>
</div>
</>
);
}
Not related but i just wanna suggest
1. If src is not dynamic , just assign a const variable assigned like
const LOGO_URL = "url to logo"
const logoStyle = {
...some css
}
<Image src={LOGO_URL} style={logoStyle} />
2. If this array of level numbers is dynamic (some api or something) , get it from props
function Skill(props){
const { levels } = props
return (
<>
{levels.map(i => {
...do anything
})}
</>
)
}
update: when you need to update parent State from child component
function RootComponent() {
const [rootState,setRootState] = useState(null)
return (
<SkillsOrAnyComponent updateState={setRootState} />
)
function SkillsOrAnyComponent(props){
const { updateState } = props
const changeMainState = (val) => {
updateState(val)
}
return ...some jsx
}
}