The data in the input box cannot be changed

Question

Goal:
When you press one of the button in order to display the modal, the the selected data, that is first and lastname should be added in the input box and it should be editable. I should enable to edit the data.

Problem:
The data that is added int hte input box cannot be changed when I have added the data in the input box.

What is needed to be changed in the source code in order to achieve the goal?

Stackblitz:
https://stackblitz.com/edit/reactjs-part1-hello-world-375htv?file=index.js

Info:
*I'm newbie in Reactjs

Thank you!

import React, { Component } from 'react';
import { render } from 'react-dom';
import './style.css';
import Modal from 'react-modal';

class App extends Component {
  constructor() {
    super();

    this.state = {
      openItem: null,
      items: [
        { firstName: 'Josef', lastName: 'Anderson', key: 'josef.anderson' },
        { firstName: 'Jim', lastName: 'West', key: 'jim.west' },
        { firstName: 'Joe', lastName: 'West', key: 'joe.west' }
      ],
      firstName: '',
      lastName: ''
    };
  }

  handleOpenModal = openItem => {
    this.setState({ openItem });
  };

  handleCloseModal = () => {
    this.setState({ openItem: null });
  };

  render() {
    const { items, openItem } = this.state;

    return (
      <div>
        <table border="1">
          <thead>
            <tr>
              <th>First Name</th>
              <th>Last Name</th>
              <th />
            </tr>
          </thead>
          <tbody>
            {items.map(item => {
              const { firstName, lastName, key } = item;

              return (
                <tr key={key}>
                  <td>{firstName}</td>
                  <td>{lastName}</td>
                  <td>
                    <button onClick={() => this.handleOpenModal(item)}>
                      Open Modal
                    </button>
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
        <div>
          {openItem !== null && (
            <Modal className="confirmation-modal" isOpen={true}>
              First Name:
              <br />
              <input
                type="text"
                id="firstName"
                name="firstName"
                value={openItem.firstName}
              />
              <br />
              <br />
              Last Name: <br />
              <input
                type="text"
                id="lastName"
                name="lastName"
                value={openItem.lastName}
              />
              <button onClick={this.handleCloseModal}>Close Modal</button>
            </Modal>
          )}
        </div>
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));

---

h1,
p {
  font-family: Lato;
}

.confirmation-overlay.ReactModal__Overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  background-color: rgba(0, 0, 0, 0.6);
}

.confirmation-overlay.ReactModal__Overlay--after-open {
  opacity: 1;

  transition: opacity 300ms ease-out;
}

.confirmation-modal.ReactModal__Content {
  position: absolute;

  top: 25%;
  left: 50%;
  width: 500px;
  right: auto;
  bottom: auto;
  border: 1px solid #eee;
  margin-right: -50%;
  transform: scale(0);
  background-color: #fff;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  outline: none;
  padding: 20px;
  opacity: 0;
}

.confirmation-modal.ReactModal__Content--after-open {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  transition: all 300ms ease-out;
}

.confirmation-modal button {
  border: 1px solid black;
  background-color: #fff;
  color: #333;
  padding: 4px 8px;
  margin: 4px;
  border-radius: 3px;
  cursor: pointer;
}

.confirmation-modal button:hover {
  background-color: #eee;
}

Answer 1

To change the value of an input which has a state value, you should add a onChange prop to the input to edit the state value with a function like this :

handleOpenItemValue = e => {
  let { name, value } = e.target;
  this.setState({ openItem: { ...this.state.openItem, [name]: value } });
}

<input
                type="text"
                id="firstName"
                name="firstName"
                value={openItem.firstName}
                onChange={(e) => this.handleOpenItemValue(e)}
/>

<input
                type="text"
                id="lastName"
                name="lastName"
                value={openItem.lastName}
                onChange={(e) => this.handleOpenItemValue(e)}
/>