I am creating here dynamic table, and I am trying to edit content of td on click of edit button click, so I am setting contentEditable true to each td on click of respective edit button, now i want to add focus by using useRed, but dynamic focus is not working, I refer other problems also on stackover flow, but nothing worked.
import react from "react";
import { useEffect, useState, useRef } from "react";
export const Table = (props) => {
const [contentEditableMode, setContentEditableMode] = useState(false)
const [contentEditableId, setContentEditableId] = useState(null);
const editTd = (e, id) => {
console.log(e.target);
console.log(id);
setContentEditableMode(!contentEditableMode);
setContentEditableId(id);
}
useEffect(() => {
}, [contentEditableMode])
return (<div><table>
<thead>
<tr>
<td>ID</td>
<td>Title</td>
<td style={{ "paddingRight": "20px" }}>Edit</td>
<td>Delete</td>
</tr>
</thead>
<tbody>
{props.tableData && props.tableData.map((row, ind) => {
return (
<tr key={row.id}>
<td>{row.id}</td>
<td contentEditable={contentEditableId === row.id ? contentEditableMode : null} suppressContentEditableWarning='true'>{row.title}</td>
<td style={{ "paddingRight": "20px", "cursor": "pointer" }} onClick={(e) => { editTd(e, row.id) }}>Edit</td>
<td style={{ "cursor": "pointer" }} onClick={() => props.deleteRowData(row.id)}>Delete</td>
</tr>)
})}
</tbody>
</table>
</div>)
}
Here I give you just one example, how you can use useRef to focus on the edit queue, if you want useRef in map you have to be unique in the ref values must be added and when you click on the edit line the status will be checked to see if the id exists in focusRef then you have to check the console and check if the focus attribute exists, If you have a focus attribute, you can add focus to the edit line. Thanks
import React, {useRef} from "react";
import { useEffect, useState, useRef } from "react";
export const Table = (props) => {
const focusRef = useRef([]);
const [contentEditableMode, setContentEditableMode] = useState(false)
const [contentEditableId, setContentEditableId] = useState(null);
const editTd = (e, id) => {
if (focusRef.current && focusRef.current[id]) {
console.log(focusRef.current[id])
//focusRef.current[id].focus();
}
console.log(e.target);
console.log(id);
setContentEditableMode(!contentEditableMode);
setContentEditableId(id);
}
useEffect(() => {
}, [contentEditableMode])
return (<div><table>
<thead>
<tr>
<td>ID</td>
<td>Title</td>
<td style={{ "paddingRight": "20px" }}>Edit</td>
<td>Delete</td>
</tr>
</thead>
<tbody>
{props.tableData && props.tableData.map((row, ind) => {
return (
<tr key={row.id}>
<td>{row.id}</td>
<td contentEditable={contentEditableId === row.id ? contentEditableMode : null} suppressContentEditableWarning='true'>{row.title}</td>
<td ref={ref => (focusRef.current[row.id] = ref)} style={{ "paddingRight": "20px", "cursor": "pointer" }} onClick={(e) => { editTd(e, row.id) }}>Edit</td>
<td style={{ "cursor": "pointer" }} onClick={() => props.deleteRowData(row.id)}>Delete</td>
</tr>)
})}
</tbody>
</table>
</div>)
}