I want to send only 1 item in Reactjs - reactjs

Question

I have a bit of trouble here, when I do onClick, I hope I can take 1 item, and the handleUpdate() work great
const [langs,setLangs] = useState([]);
function handleUpdate(item){
console.log(item);
}
{langs.map((item, index) => {
<tr key={index}>
//Some code here
<td className='text-primary'
style={{maxHeight: '21px',width: '8%',maxWidth: '300px'}}
onClick={()=>handleUpdate(item)}>
<ModalEditNgonNgu item={item}/>
</td>
</tr>
}
but I don't know why in 'ModalEditNgonNgu' I rendered all items like this
enter image description here
And When I tried to Edit, it can show only the first item, whatever I click.
This is ModalEditNgonNgu:
import '../../css/style.css';
import { useEffect } from "react";
import { useState, useSelector } from "react";
import { ajaxCallGetUrlDemo, ajaxCallPost } from "../libs/base";
import Select from 'react-select'
import { Const_Libs } from "../libs/Const_Libs";
import languagesList from "./languageList/country";
import { get } from 'jquery';
const ModalEditNgonNgu = (props) => {
const { handleGetLanguage } = props;
const [langName, setLangName] = useState("");
const [mainLangs, setMainLangs] = useState([]);
const [mainLang, setMainLang] = useState("");
const [titleLang, setTitleLang] = useState("");
const [describeLang, setDescribeLang] = useState("");
const [authorLang, setAuthorLang] = useState("");
const [rateLang, setRateLang] = useState("");
const [reviewsLang, setReviewsLang] = useState("");
const [translateList, setTranslateList] = useState([]);
const mainLangOptions = [
{ value: 'vi', label: 'Vietnamese' },
{ value: 'en', label: 'English' },
{ value: 'zh', label: 'Chinese' },
{ value: 'ja', label: 'Japanese' },
{ value: 'de', label: 'German' },
];
console.log(props.item);
const handleMainLang=(e)=>{
const getMainLang = e.target.value;
setMainLang(getMainLang);
}
const handleTransList=(e)=>{
const getTransList = e.target.value;
setTranslateList(getTransList);
}
const handleSubmit = () => {
let arr = [{
nameLanguage: langName,
mainLanguage: mainLang,
titleLanguage: titleLang,
descriptionLanguage: describeLang,
authorLanguage: authorLang,
rateLanguage: rateLang,
reviewsLanguage: reviewsLang,
transLanguage: translateList
}]
console.log(arr);
resetData();
props.editLang(arr,props.item.id);
}
const resetData = () => {
setLangName("");
setMainLang("");
setTitleLang("");
setDescribeLang("");
setAuthorLang("");
setRateLang("");
setReviewsLang("");
setTranslateList([]);
}
return (
<>
<button type="button" className="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModalEditNgonNgu" style={{ fontSize: '14px' }}>
{props.item.language_name}
</button>
<div>
<div className="modal fade" id="myModalEditNgonNgu">
<div className="modal-dialog modal-dialog-centered" style={{ minWidth: '700px' }}>
<div className="modal-content">
<div className="modal-header">
<h4 className="modal-title">Sửa ngôn ngữ</h4>
<button type="button" className="btn-close" data-bs-dismiss="modal" />
</div>
<div className="modal-body">
<form>
<div className="col">
<div className="row-2">
<label htmlFor="name-campaign" className="form-label fs-6 fw-bolder">Tên ngôn ngữ</label>
<input type="text"
className="form-control" id="name-campaign"
placeholder="Nhập tên ngôn ngữ...."
defaultValue={props.item.language_name}
onChange={(e) => setLangName(e.target.value)}
/>
</div>
<div className="row-2">
<label htmlFor="name-campaign" className="form-label fs-6 fw-bolder">Tiêu đề</label>
<input type="text"
className="form-control" id="name-campaign"
placeholder="Nhập tiêu đề...."
defaultValue={props.item.title_lang}
onChange={(e) => setTitleLang(e.target.value)}
/>
</div>
<div className="row-2">
<label htmlFor="name-campaign" className="form-label fs-6 fw-bolder">Mô tả</label>
<input type="text"
className="form-control" id="name-campaign"
placeholder="Nhập mô tả...."
defaultValue={props.item.describe_lang}
onChange={(e) => setDescribeLang(e.target.value)}
/>
</div>
<div className="row-2">
<label htmlFor="name-campaign" className="form-label fs-6 fw-bolder">Tác giả</label>
<input type="text"
className="form-control" id="name-campaign"
placeholder="Nhập tác giả (VD: Author)"
defaultValue={props.item.author_lang}
onChange={(e) => setAuthorLang(e.target.value)}
/>
</div>
<div className="row-2">
<label htmlFor="name-campaign" className="form-label fs-6 fw-bolder">Đánh giá</label>
<input type="text"
className="form-control" id="name-campaign"
placeholder="Nhập đánh giá (VD: Rate)"
defaultValue={props.item.rate_lang}
onChange={(e) => setRateLang(e.target.value)}
/>
</div>
<div className="row-2">
<label htmlFor="name-campaign" className="form-label fs-6 fw-bolder">Lượt đánh giá</label>
<input type="text"
className="form-control" id="name-campaign"
placeholder="Nhập lượt đánh giá (VD: reviews)"
defaultValue={props.item.reviews_lang}
onChange={(e) => setReviewsLang(e.target.value)}
/>
</div>
</div>
<div className="col">
<div className="row-2">
<label htmlFor="name-campaign" className="form-label fs-6 fw-bolder">Ngôn ngữ chính</label>
<Select
onChange={(e) =>setMainLang(e)}
options={mainLangOptions}
/>
</div>
<div className="row-2">
<label htmlFor="name-campaign" className="form-label fs-6 fw-bolder">Những ngôn ngữ dịch</label>
<Select
onChange={(e) =>setTranslateList(e)}
isMulti
isSearchable={true}
options={languagesList}
/>
</div>
</div>
</form>
</div>
<div className="modal-footer">
<button type="button" className="btn btn-success" data-bs-dismiss="modal" onClick={handleSubmit}>Update</button>
<button type="button" className="btn btn-danger" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</>
);
}
export default ModalEditNgonNgu;
Sorry if I wrote ambiguous, but I want to take correct 'item' whenever I click on the button that have language_name. What should I do?

Answer 1

There is not enough information in your question. I will do my best to help you with your issue in the current context.
There are several issues in your code:
Modal Visibility
When you render the list of item, you constantly render the ModalEditNgonNgu for every item. I believe that it is not the desired behavior you want to get. Assuming you want to show the item you clicked on, you can do something like:
function App() {
const [langs,setLangs] = useState([]);
const [selectedItem, setSelectedItem] = useState(undefined);
function handleUpdate(item){
console.log(item);
setSelectedItem(item);
}
return (<>
<table>
{langs.map((item, index) => {
<tr key={index}>
//Some code here
<td className='text-primary' style={{maxHeight: '21px',width: '8%',maxWidth: '300px'}} onClick={()=>handleUpdate(item)}>
This is item {item.id}
</td>
</tr>
}
</table>
{selected Item && <ModalEditNgonNgu item={selectedItem}/>}
</>);
}
In this code, we save the selected item in a state and create a single model based on the selected item.
Please note that this solution is not optimal. Most Modal implementation has some animations when they show up and disappear and should be shown by a property and not by the DOM. I guess you are using Bootstarp, so consider using some React wrapper like React-Boostrap and others.
Key property
When you render bunch of component in a loop, like map, you have to define a unique key prop to the child element, to let React follow and match different renders.
You added <tr key={index}> this is ok, but bad-practice. Key should be unique, index is NOT a good key value. The main goal of the key is let react track your componens. If you remove/insert items in the middle of the list, different items will have same key in different renders.
Since your item has an id property, you better do <tr key={item.id}>.
Arrow functions as props
Doing <td ... onClick={()=>handleUpdate(item)}> will work, but it creates a new function instance on every render, which will re-render every item in the list, every time that the list will be re-render.
It may be OK in your lightweight example, but it may cause performance issues in complex list, so you should avoid that.