1

how do I stop my componentDidMount from getting called twice?

Following is my code:

class BarSearchFormComponent extends Component {
  constructor(props) {
    super(props);
    this.searchInput = React.createRef();
    this.onChange = this.onChange.bind(this);
    this.onKeyDown = this.onKeyDown.bind(this);
    this.state = { keywords: null, inputValue: '' };
  }

  componentDidMount() {
    const value = queryString.parse(window.location.search);
    const { keywords } = value;
    this.setState({ inputValue: keywords });
  }

  onKeyDown(e) {
    if (e.keyCode === KEY_CODE_ENTER) {
      this.props.onSubmit({ keywords: this.state.keywords })
      if (this.searchInput.current) {
        this.searchInput.current.blur();
      }
    }
  }
  onChange(keywords) {
    this.setState({ keywords: keywords }, () => {
      this.setState({ inputValue: this.state.keywords });
    });
  }

  render() {
    const { right } = this.props;
    return (
      <FinalForm

I am trying to display the searched keyword in my bar search component.

Rehab
  • 45
  • 5

0 Answers0