Ttrying to load a table using react-bootstrap-table

Question

Trying to edit the table cells using react-bootstrap-table, I am able edit successfully, but when I click on other components in the page the edited content has been restored by original value.

export default class PredictResult extends React.Component<IPredictResultProps, IPredictResultState>
render()(
<my table code >)

each time I click or hover on other component, the whole page is rendering the whole component in the page and values in the table are restored.

Answer 1

when you click somewhere component render again so you must change the state in "onChange" method (change the record that you pass to table with setState method)

it's just an example

const Firstlist = [{ id: 1, label: 'lable1' }, { id: 2, label: 'lable2' }, { id: 3, label: 'lable3' }]
const App = () => {
  const [list, setList] = useState(Firstlist);
const onChaned=(value,item)=>{
  item.label=value;
  setList([...list]);
  
}
  return (
    <Table>
      <thead>
        <th>
          <td>Id</td>
          <td>Lable</td>
        </th>
        <tbody>
          {list.map(item => <tr key={item.id}>
            <td>{item.id}</td>
            <td><Input value={item.label} type='text'
              onChange={({ target }) => onChaned(target.value,item)} >{item.label}</Input></td>
          </tr>)}
        </tbody>
      </thead>
    </Table>
  );
};

export default App;