javascript - Unable to type in text-box in modal and re-render with new state

Question

I have the following model in my render method: {

showEditModal && <Modal toggleModal={this.togglePageModal} pageModal={true}>
            <h2 style={{ textAlign: "center", width: "100%" }}>
              {rawProjects[selectedProject].name}
            </h2>
            <span
              style={{
                textAlign: "center",
              }}
            >
              {currentStep === 1 && `BASIC DETAILS`}
              {currentStep === 2 && `ARCHITECTURE`}
              {currentStep === 3 && `TEAM`}
            </span>
            <DotSteps
              totalSteps={4}
              currentStep={currentStep}
              onChange={currentStep => this.setState({ currentStep })}
              className="flex-jfe"
            />
            {currentStep === 1 && (
              <div className="w-100 flex flex-col">
                <ContentCard>
                  <span style={{ color: "#5252ED", fontWeight: "bold" }}>
                    Type
                  </span>
            <Input>  //the input text box
            label="Project Type"
            type="text"
            placeholder="project type"
            inputId="basicInput"
            value={rawProjects[selectedProject].type} //received from API call where rawProjects is an array 
            onChange={e => this.setState(state => {
              console.log(state.rawProjects[selectedProject], "old check");
              state.rawProjects[selectedProject].type = "new type";
              console.log(state.rawProjects[selectedProject], "new check");
            })}
            
          ></Input>
                </ContentCard>

I have an onChange method and I can see that as soon as I click on the text box, the console logs show that the type has been changed to the string "new type". However, I'm unable to actually type in the text box as well as the textbox doesn't update to "new type" string.

Any ideas as to why I'm not able to type in the textbox?

question from:https://stackoverflow.com/questions/65877413/unable-to-type-in-text-box-in-modal-and-re-render-with-new-state

Answer 1

You passed a function in setState. The function should return value. But you didn't return the value. Also, you don't have to change the state value directly.

Example:

<Input 
    label="Project Type"
    type="text"
    placeholder="project type"
    inputId="basicInput"
    value={rawProjects[selectedProject].type}
    onChange={e => this.setState(state => {
        return {project_type: "new type"};
    })}
></input>