title: TypeError: Cannot read property 'name' of null when pressing any key react reactjs javascript redux
body: <p>I am new to react and trying to show update values of an input field. When I press any key, it throws the TypeError: Cannot read property 'name' of null error. </p>
  
  <pre><code>onChange = (e) =&gt; {
      e.preventDefault();
      this.setState((prevState) =&gt; ({
        profile: {
          ...prevState.profile,
          [e.target.name]: e.target.value,  //this is where the error is pointed
        },
      }));
  </code></pre>
  
  <p>this is my state and I am setting my state in <code>componentDidUpdate</code> after getting my values from the redux store.</p>
  
  <p>state:</p>
  
  <pre><code>state = {
      title: "Create Your Profile",
      profile: {},
      errors: {},
      toggleSocialProfileInput: false,
    };
  </code></pre>
  
  <p>componentDidUpdate:</p>
  
  <pre><code>componentDidUpdate(prevProps) {
      if (this.props.errors !== prevProps.errors)
        this.setState({ errors: this.props.errors });
      if (this.props.profileReducer !== prevProps.profileReducer)
        this.setState({ profile: data, title: "Edit Your Profile" });
    }
  </code></pre>
  
  <p>I am using these as input where I am setting my values using profile state</p>
  
  <pre><code>const { profile } = this.state;
  
                 &lt;TextField
                  placeholder="* Profile Handle"
                  name="handle"
                  value={profile.handle}
                  onChange={this.onChange}
                  error={errors.handle}
                  info="A unique handle for your profile URL. Your full name, company name, nickname"
                /&gt;
                &lt;TextField
                  placeholder="Status"
                  name="status"
                  value={profile.status ? profile.status : ""}
                  onChange={this.onChange}
                  error={errors.status}
                  info="What are you upto? Or some quote"
                /&gt;
                &lt;TextField
                  placeholder="Location"
                  name="location"
                  value={profile.location ? profile.location : ""}
                  onChange={this.onChange}
                  error={errors.location}
                  info="City or City, State (eg. Toronto, ON)"
                /&gt;
  </code></pre>
  
  <p>And if you want to see my TextField component: </p>
  
  <pre><code>const TextField = ({
    name,
    placeholder,
    error,
    info,
    type,
    icon,
    disabled,
    value,
    onChange,
  }) =&gt; {
    const containerClass = icon ? "input-group mb-3" : "form-group";
    return (
      &lt;div className={containerClass}&gt;
        {icon &amp;&amp; (
          &lt;div className="input-group-prepend"&gt;
            &lt;span className="input-group-text"&gt;
              &lt;i className={icon} /&gt;
            &lt;/span&gt;
          &lt;/div&gt;
        )}
        &lt;input
          type={type}
          className={`form-control form-control-lg ${error &amp;&amp; "is-invalid"}`}
          placeholder={placeholder}
          name={name}
          value={value}
          onChange={onChange}
          disabled={disabled}
        /&gt;
        {info &amp;&amp; &lt;small className="form-text text-muted"&gt;{info}&lt;/small&gt;}
        {error &amp;&amp; &lt;div className="invalid-feedback"&gt;{error}&lt;/div&gt;}
      &lt;/div&gt;
    );
  };
  </code></pre>
  
  <p>One way I know is that instead of profile I can declare the names of the textfields in the state but I want to keep the code short and thus want to use the profile object in state.</p>