score:-2

class ParentWorkSpaceEditModal extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      editWorkspaceName: 'whatever your original value is',
      exists: false,
    };
  }

  handleChange = event => {
    this.setState({ editWorkspaceName: event.target.value });
  };

  render() {
    const { editWorkspaceName, exists } = this.state;
    return (
      <ChildWorkspaceEditModal editWorkspaceName={editWorkspaceName} exists={exists} handleChange={this.handleChange} />
    )
  }
}

const ChildWorkspaceEditModal = ({ editWorkspaceName, exists, handleChange )} => {
  content = (
    <div className="save-workspace">
      <div className="modal-header">
        <div className="modal-title">
          <p>Rename Workspace</p>
        </div>
        <div className="modal-select">
          <span className="input-label">Workspace Name</span>
          <div>
            <input
              className="name-input"
              placeholder="Workspace Name"
              type="text"
              value={editWorkspaceName}
              onChange={handleChange}
            />
            {notValid && (
              <p className="invalid">
              Only alphanumeric characters, hyphens, spaces, and underscores are allowed.
              </p>
             )}
          </div>
        </div>
      </div>
      <div className="modal-footer">
        <button
          type="button"
          className="btn btn-default"
          onClick={this.onCloseModal}
        >
          Cancel
         </button>
         <button
           type="button"
           className="btn btn-primary"
           onClick={this.editWorkspace}
           disabled={notValid}
         >
          Update
         </button>
       </div>
     </div>
  );

  const contentStyle = {
    width: '500px',
  };

  return (
      <Modal
        isOpen={true}
        onClose={this.onCloseModal}
        contentStyle={contentStyle}
        shouldCloseOnOverlayClick={true}
      >
        {content}
      </Modal>
    )
}

Related Query

More Query from same tag