Changing div text value by clicking on a li item - reactjs

Question

i want to change the text value in a div by clicking on a ul li item.
const text = {
value1 : 'blabla1',
value2 : 'blabla2',
value3 : 'blabla3'
}
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<div> </div>
By clicking on li 1 the div get the value1, by clicking on li 2 the div get the value2 etc.
Can someone give me some advice, thank you

Answer 1

i am write code
import React, { useState } from "react";
import "./styles.css";
export default function App() {
const text = [
{ id: 1, value: "blabla1" },
{ id: 2, value: "blabla2" },
{ id: 3, value: "blabla3" }
];
const [textSelected, setTextSelected] = useState("");
const selectLi = (id) => {
let index = text.findIndex((x) => x.id === id);
if (index === -1) return;
setTextSelected(text[index].value);
};
return (
<>
<ul>
{text.map((x) => (
<li
onClick={() => {
selectLi(x.id);
}}
>
{x.id}
</li>
))}
</ul>
<br />
<div>{textSelected}</div>
</>
);
}
Work Demo

Answer 2

Here is another approach:
import React, { useState } from "react";
export default function App() {
const [listValues, setListValues] = useState([1, 2, 3]);
const text = { value1: "blabla1", value2: "blabla2", value3: "blabla3" };
const showTextValue = (index) => {
const newValues = [...listValues];
newValues[index] = Object.values(text)[index];
setListValues(newValues);
};
const content = listValues.map((val, index) => (
<li key={index} onClick={() => showTextValue(index)}>
{val}
</li>
));
return (
<div className="App">
<ul>{content}</ul>
</div>
);
}

Answer 3

import React from "react";
import "./styles.css";
export default function App() {
const clickHandler = (e) => {
alert("value is " + e.target.id);
let item = document.getElementById(e.target.id);
console.log(item.getAttribute("name"));
};
return (
<div className="App">
<ul>
<li id="blabla1" name="el1" onClick={clickHandler}>
1
</li>
<li id="blabla2" name="el2" onClick={clickHandler}>
2
</li>
<li id="blabla3" name="el3" onClick={clickHandler}>
3
</li>
</ul>
</div>
);
}
CodeSandbox example. You can also assign a value to a variable by using useState.