React - edytowalna komórka tabeli

// Uwaga: Odkomentuj poniższe linijki podczas pracy z kompilatorem JSX:

// import React from 'react';

// import ReactDOM from 'react-dom';

​

const itemStyle = {

    padding: '2px',

    border: '1px solid silver',

    fontFamily: 'Arial',

    fontSize: '13px',

    display: 'flex'

};

​

const textStyle = {

    ...itemStyle,

    padding: '5px 4px',

};

​

const inputStyle = {

    padding: '0',

    flex: '1',

    fontFamily: 'Arial',

    fontSize: '13px'

};

​

const buttonStyle = {

    flex: 'none'

};

​

const Cell = ({value, onChange}) => {

    const [mode, setMode] = React.useState('read');

    const [text, setText] = React.useState(value ?? '');

    React.useEffect(() => {

        setText(value);

    }, [value]); // <--- gdy zmieniana jest wartość value, zmienia się również stan 

    if (mode === 'edit') {

        const handleInputChange = (e) => {

            setText(e.target.value);

        };

        const handleSaveClick = () => {

            setMode('read');

            if (onChange) {

                onChange(text);

            }

        };

        return (

          <div style={itemStyle}>

            <input type="text" value={text}

                   style={inputStyle} onChange={handleInputChange} />

            <button style={buttonStyle} onClick={handleSaveClick}>Ok</button>

          </div>

        );

    }

    if (mode === 'read') {

        const handleEditClick = () => {

            setMode('edit');

        };

        return (

          <div style={textStyle} onClick={handleEditClick}>{text}</div>

        );

    }

    return null;

};

​

// Przykład:

​

const App = () => {

  const [values, setValues] = React.useState(['Tekst 1', 'Tekst 2', 'Tekst 2']);

  console.log(...values);

  return (

    <table style={{width: '250px'}}>

      <tbody>

      {values.map((value, index) => {

        const handleChange = value => {

            // metoda map() jest używana do aktualizacji wskazanej wartości z kopiowaniem stanu

            setValues(values.map((v, i) => index === i ? value : v));

        };

        return (

          <tr key={index}>

            <td><Cell value={value} onChange={handleChange} /></td>

          </tr>

        );

      })}

      </tbody>

    </table>

  );

};

​

const root = document.querySelector('#root');

ReactDOM.render(<App/>, root );