Ytukyg

I have two input fields. I'm also using Fabric UI as a UI Framework for this app. I need to be able to update the view on submit. I am setting the props to the state in the component. Once set, I then pass those values to the view. Unsure how to retrieve and update said values.

{

        isOpened: false,

        label: "Home Address",

        labelId: 2,

        values:

            [

                {field: "homeAddress1", value: "2343 Main Street"},

                {field: "homeAddress2", value: "New York, NY"}

            ]

    }

I am updating the value in each object on submit.

class Info extends Component {

  constructor (props) {

    super(props)

    this.state = {

      isOpened: this.props.info.isOpened,

      information: this.props.info

    }

    this.toggleEdit = this.toggleEdit.bind(this)

    this.handleChange = this.handleChange.bind(this)

    this.handleSubmit = this.handleSubmit.bind(this)

  }



  toggleEdit () {

    const { isOpened } = this.state

    this.setState({

      isOpened: !isOpened

    })

  }



  handleSubmit(event) {

    console.log('event', this.refs.prefName.value)

    event.preventDefault();



  }



  handleChange(event) {

      console.log('logging state', this.state)

      this.state.information.values.forEach(item => {

        // const { value } = item.value  

        // this.setState({value: event.target.value})

      })

    //   this.setState({value: event.target.value})

    console.log('event on change', event.target.value)

  }



  render () {

    const { isOpened } = this.state

    const { information } = this.state



    console.log(this.state, 'logging state')

    return (

      <div className="profile--info-wrapper">

        <h2 className="profile--sub-header--light">

          {information.label}

          {information.editField && (

            <Icon

              iconName="Edit"

              className={

                'ms-IconExample ' +

                (!isOpened ? 'pencil-icon' : 'pencil-icon-edit')

              }

              onClick={this.toggleEdit}

            />

          )}

        </h2>

        <form className="profile--form">

          {information.values.map(item => {

            return !isOpened ? (

              <FieldWrapper item={item} key={item.field} />

            ) : item.field === 'emergencyContactNumber' ||

            item.field === 'phoneNumber' ? (

                <MaskedTextField

                  label={item.fieldName}

                  mask="999-999-9999"

                  value={item.value}

                  key={item.field}

                  ref={item.field}

                />

              ) : (

                <TextField

                  label={item.fieldName}

                  value={item.value}

                  key={item.field}

                  onChange={this.handleChange}

                  ref={item.field}

                />

              )

          })}

          {isOpened && (

            <div className="ms-Grid-row button--wrapper">

              <PrimaryButton

                data-automation-id="test"

                text="Save"

                onClick={this.handleSubmit}

                allowDisabledFocus={true}

              />

              <DefaultButton

                data-automation-id="test"

                text="Cancel"

                onClick={this.toggleEdit}

              />

            </div>

          )}

        </form>

      </div>

    )

  }

}