React submitting form does not re-render

Question

I am making 2 react components (PlayerSearch for sumbitting a form containing target player's name, and PlayerAPI for fetching request). I want it to re-render PlayerAPI everytime I hit the submit button OR everytime the submitted data is updated. So my code looks like this: In PlayerSearch:

export function PlayerSearch() {
  const [formData, setFormData] = useState({ APIkey: "", name: "" });
  const [submittedData, setsubmittedData] = useState({ submittedAPIkey:"", submittedname:"" });
  

  const onChange = (event) => {
    setFormData({ ...formData, [event.target.name]: event.target.value });
  };

    function handlesubmit(e) {
      e.preventDefault();
      setsubmittedData({ ...submittedData, submittedAPIkey: formData.APIkey, submittedname: formData.name });
    }

    return <div className='player'>
      <div className='inputfield'>
        <form onSubmit={handlesubmit} method='GET' autoComplete="off">
          <div>
            <label htmlFor="APIkey">Your API key:</label>
            <input placeholder='Your API key' onFocus={(e)=>{e.target.placeholder=''}} type="text" id="APIkey" name="APIkey" value={formData.APIkey} onChange={onChange}/>
          </div>
          <div>
            <label htmlFor="name">Player name:</label>
            <input placeholder='Player name' onFocus={(e)=>{e.target.placeholder=''}} type="text" id="name" name="name" value={formData.name} onChange={onChange}/>
          </div>
          <div>
            <button type='submit'>Submit</button>
          </div> 
        </form>
      </div>
      <div id='result'>

//This is where I render the PlayerAPI

        {(submittedData.submittedAPIkey !== "" && submittedData.submittedname !== "") && <PlayerAPI APIkey={submittedData.submittedAPIkey} name={submittedData.submittedname} />}
      </div>
    </div>
  }

Edit: I've found out that the form submit is not the problem. The problem is in the PlayerAPI and I fixed it.

The PlayerAPI before:

export function PlayerAPI(props) {
  const [data, setdata] = useState({ accountId: ''});
  const getPlayerID = async () => {
    //some API fetching...
  }
    useEffect(()=>{
      getPlayerID();
    },[]);

    return <div>
        <div className='SearchResult'>
          hello {JSON.stringify(data)}
        </div>
      </div>;
  }

The PlayerAPI now:

import { useEffect, useState } from "react";

export function PlayerAPI(props) {
  const [data, setdata] = useState({ accountId: ''});
  const getPlayerID = async () => {
    //some API fetching...
  }
    useEffect(()=>{
      getPlayerID();
    },[props.name, props.APIkey]);

    return <div>
        <div className='SearchResult'>
          hello {JSON.stringify(data)}
        </div>
      </div>;
  }

It seems to be working just fine here in the [code sandbox](https://codesandbox.io/s/keen-heisenberg-y3v5wy?file=/src/App.js) — RubenSmn, Nov 20 '22 at 11:48
@RubenSmn You're right, I found out that PlayerSearch is not the problem here, the problem is in the PlayerAPI component. I've edited the question now. — lamsmallsmall, Nov 20 '22 at 19:25

score 1 · Answer 1 · answered Nov 20 '22 at 10:26

1

maybe this solution will help? Setting onSubmit in React.js

moving the e.preventDefault(); to the end of the handleSubmit

answered Nov 20 '22 at 10:26

Tomer_Ra

123
1
11

score 0 · Accepted Answer · answered Nov 21 '22 at 09:04

I've found out that the form submit is not the problem. The problem is in the PlayerAPI and I fixed it.

The PlayerAPI before:

export function PlayerAPI(props) {
  const [data, setdata] = useState({ accountId: ''});
  const getPlayerID = async () => {
    //some API fetching...
  }
    useEffect(()=>{
      getPlayerID();
    },[]);

    return <div>
        <div className='SearchResult'>
          hello {JSON.stringify(data)}
        </div>
      </div>;
  }

The PlayerAPI now:

import { useEffect, useState } from "react";

export function PlayerAPI(props) {
  const [data, setdata] = useState({ accountId: ''});
  const getPlayerID = async () => {
    //some API fetching...
  }
    useEffect(()=>{
      getPlayerID();
    },[props.name, props.APIkey]);

    return <div>
        <div className='SearchResult'>
          hello {JSON.stringify(data)}
        </div>
      </div>;
  }

So apparently somehow I thought that hitting the submit button again would activate the initial render of useEffect in PlayerAPI so I left the dependency array empty.

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). — Community, Nov 23 '22 at 09:45

React submitting form does not re-render

2 Answers2