How can I manipulate the search input provided by user in react?

Question

I am building an application that fetches a player's details, using the input. But the api only allows fetching the details using player's id, hence I have to use another method to first get the id using player's name. But there is some problem getting the input. I also tried using e.target.value, but it isn't working

    import React, { useEffect, useState } from 'react'
import HLTV from 'hltv';

// Getting player id using this fn.
const getPlayerIdByName = async (text) => {

    return await HLTV.getPlayerByName({ name: text })
        .then(res => res.id)
        // .then(data => console.log(data))
        .catch(err => console.log(err));
}

//Getting player stats using id obtained from above
const getPlayerStats = (playerId) => {
    HLTV.getPlayerStats({ id: playerId })
        .then(res => Object.entries(res))

}


const Search = () => {

    const [name, setName] = useState('');
    const [id, setId] = useState('');

    useEffect(() => {
        getPlayerIdByName(name)
            .then(id => setId(id))
    }, [name]);

    const onChange = (e) => {
        setName(e.target.value)
    }

    const onSubmit = (e) => {
        e.preventDefault();
        setName(name);
        console.log(name)
    }

    return (
        <div>
            <form onSubmit={onSubmit} className="player">
                <input type="text" value={name} placeholder="Enter Player's in game name" onChange={onChange} />

                <button type="Submit" defaultValue="Search">Search</button>
            </form>
        </div>
    )
}

export default Search;

Answer 1

I would refactor your code like this:

The main problem I see, is that you are using useEffect() to get the playerIdByName every time that name changes. Instead, just call that function inside the onSubmit handler. And instead of storing the id in state, store your stats instead.

Then, when you have stats in state, you can render them by maping the key value pairs.

import HLTV from 'hltv';

// Getting player id using this fn.
const getPlayerByName = async (text) => await HLTV.getPlayerByName({ name: text });

//Getting player stats using id obtained from above
const getPlayerStats = async (playerId) => await HLTV.getPlayerStats({ id: playerId });

const Search = () => {
  const [name, setName] = useState('');
  const [stats, setStats] = useState([]);

  const onChange = (e) => {
    setName(e.target.value);
  };

  const fetchStats = async () => {
    const player = await getPlayerByName(name);
    const stats = await getPlayerStats(player.id);
    const statsEntries = Object.entries(stats);
    setStats(statsEntries);
  };

  const onSubmit = async (e) => {
    e.preventDefault();
    try {
      await fetchStats();
    } catch (error) {
      console.error(error);
    }
  };

  return (
    <div>
      <form onSubmit={onSubmit} className="player">
        <input
          type="text"
          value={name}
          placeholder="Enter Player's in game name"
          onChange={onChange}
        />

        <button type="Submit" defaultValue="Search">
          Search
        </button>
      </form>
      {stats.length > 0 && (
        <div>
          {stats.map(([key, value]) => (
            <p>
              {key}: {value}
            </p>
          ))}
        </div>
      )}
    </div>
  );
};

export default Search;