希望只在映射中的特定元素上使用函数

Question

我试图用输入标签代替我的p标签，它已经工作了，但我的问题是函数执行从我的。map的所有项目，我只想显示一个我点击编辑。我已经可以从我的控制台日志中获得id，但我不知道如何使用它来识别哪一个必须执行该函数。感谢所有能找到解决方法的人!

<tbody>
{carsList.map((val, key) => {
const handleclick = (id) => {

setUnShow(current => !current)
setIsShow(current => !current)
console.log(id)
};
return (
<tr key={key}>
<th scope='row'>
{unShow && (<input type="text" 
onChange={(event) =>  {newsetCarsName(event.target.value)}} 
placeholder={val.carsName}
/>)}
{isShow && (<p>{val.carsName}</p>)}
</th>
<th scope='row'>
{unShow && (<input type="text" 
onChange={(event) =>  {newsetModel(event.target.value)}} 
placeholder={val.carsModels}
/>)}
{isShow && (<p>{val.carsModels}</p>)}
</th>
<th scope='row'>
{unShow && (<input type="text" 
onChange={(event) =>  {newsetDate(event.target.value)}}
placeholder={val.carsDate}
/>)}
{isShow && (<p>{val.carsDate}</p>)}
</th>
<th scope='row'>
{unShow && (<input type="text" 
onChange={(event) =>  {newsetNbkm(event.target.value)}} 
placeholder={val.carsNbkm}
/>)}
{isShow && (<p>{val.carsNbkm}</p>)}
</th>
<th scope='row'>
{unShow && (<input type="text" 
onChange={(event) =>  {newsetPrice(event.target.value)}} 
placeholder={val.carsPrice}
/>)}
{isShow && (<p>{val.carsPrice}</p>)}
</th>
<th scope='row'>
{unShow && (<input type="text" 
onChange={(event) =>  {newsetPowch(event.target.value)}}
placeholder={val.carsPowch}
/>)}
{isShow && (<p>{val.carsPowch}</p>)}
</th>
<th scope='row'>
<button onClick={() => Delete(val._id)}>Delete</button>
</th>
<th scope='row'>
{unShow && (<button onClick={EditConfirm}>Modifier</button>)}
{isShow && (<button onClick={() => handleclick(val._id)}>Edit</button>)}
{unShow && (<button onClick={() => handleclick(val._id)}>Annuler</button>)}
</th>
</tr>
)
})}
</tbody>

Answer 1

不是返回一个带有大量三元格式和条件显示的组件，而是返回一个用于unShow的组件和一个用于isShow的组件