Stop input from re-rendering onChange

Question

I am capturing the input value as a state and on button submit I want to add the result into an array.

The problem I am having is every time I type in a character in the input field it creates a new array before I even hit the submit button.

Following is the screenshot of the weird behaviour.

Here is my code:

import React, { Component } from "react";
import autoBind from "react-autobind";

let fixtures = [];

const submitFixture = (homeTeam, awayTeam) => {
  fixtures.push({
    homeTeam: homeTeam,
    awayTeam: awayTeam
  });
};
class CreateFixture extends Component {
  constructor(props) {
    super(props);
    autoBind(this);

    this.state = {
      homeTeam: "",
      awayTeam: ""
    };
  }

  render() {
    const { homeTeam, awayTeam } = this.state;

return (
  
    Home Team
     {
        this.setState({ homeTeam: e.target.value });
      }}
    />
    Away Team
     {
        this.setState({ awayTeam: e.target.value });
      }}
    />
    
    {console.log(fixtures)}
  
);
  }
}

export default CreateFixture;

user_3617886 · Answer

You are invoking your submitFixture function directly on render by writing onClick={submitFixture(homeTeam, awayTeam)}. This way you will add a new element to the array every time the component is re-rendered.

You could create a new inlined function that calls submitFixture when the click event occurs instead.

If you want to render fixtures in some way, it's better to put them in the component state instead.

Example

class CreateFixture extends React.Component {
  state = {
    homeTeam: "",
    awayTeam: "",
    fixtures: []
  };

  submitFixture = () => {
    this.setState(({ homeTeam, awayTeam, fixtures }) => ({
      fixtures: [...fixtures, { homeTeam, awayTeam }]
    }));
  };

  render() {
    const { homeTeam, awayTeam, fixtures } = this.state;

    return (
      
        Home Team
         {
            this.setState({ homeTeam: e.target.value });
          }}
        />
        Away Team
         {
            this.setState({ awayTeam: e.target.value });
          }}
        />
        
        {JSON.stringify(fixtures)}
      
    );
  }
}

ReactDOM.render(, document.getElementById("root"));

user_4450187 · Answer

You should get familiar with the react lifecyles:

https://reactjs.org/docs/state-and-lifecycle.html

setState() will always lead to a re-render unless shouldComponentUpdate() returns false

https://reactjs.org/docs/react-component.html#setstate

Stop input from re-rendering onChange

2 Answers