Controlling various states within React can be a challenging task to

Question

Controlling various states within React can be a challenging task to

Currently tackling a challenge within a tennis application as I struggle with managing numerous states. To elaborate, the first round of a tennis tournament involves 128 players where each row consists of a player and their seed.

https://i.stack.imgur.com/VDWJa.png https://i.stack.imgur.com/KYk6F.png

Array.from(Array(128)).map((p, index) => {

const oddIndex = index * 2 + 1
  const evenIndex = index * 2 + 2

  const getCurrentSeed = (position) => {
    const seed = !objectIsEmpty(games) && games?.rounds[round.round]?.positions[position]?.seed

    return seed || ''
  }

  const getCurrentATPPlayer = (position) => {
    const ATPPlayer = !objectIsEmpty(games) && games?.rounds[round.round]?.positions[position]?.atp_player
    return ATPPlayer || {}
  }

<div className="player">
 <ATPPlayerFinderWrapper position={oddIndex} setATPPlayerId={setATPPlayerId} setCurrentPosition={setCurrentPosition} ATPPlayer={getCurrentATPPlayer(oddIndex)} />
</div>
<div className="seed">
    <TextField
      id={`seed${oddIndex}`}
      label="Seed"
      variant="standard"
      onChange={(e) => setSeed(e.target.value)}
      InputProps={{ disableUnderline: true }}
      value={getCurrentSeed(oddIndex)}
   />
</div>

});

Facing a major setback when encountering rows from the back end where numerous states are required for each textfield but unfortunately, it's not functioning as expected and poses a significant issue in terms of management.

reactjs next.js state

Answer 1

Answer №1

To address this issue, the suggested approach is to store your array in a state and initialize each of its values as an empty string.

const [seeds, setSeeds] = useState(Array(128).fill(''));
const [ATPPlayers, setATPPlayers] = useState(Array(128).fill({}));

Subsequently, whenever there is a change in the state, update its value accordingly

const handleSeedChange = (position, value) => {
    const newSeeds = [...seeds];
    newSeeds[position] = value;
    setSeeds(newSeeds);
  };

  const handleATPPlayerChange = (position, player) => {
    const newATPPlayers = [...ATPPlayers];
    newATPPlayers[position] = player;
    setATPPlayers(newATPPlayers);
  };

Below is the complete code snippet tailored to resolve your particular problem:

import React, { useState } from 'react';

const TennisBracket = ({ games, round }) => {
  const [seeds, setSeeds] = useState(Array(128).fill(''));
  const [ATPPlayers, setATPPlayers] = useState(Array(128).fill({}));

  const getCurrentSeed = (position) => seeds[position] || '';

  const getCurrentATPPlayer = (position) => ATPPlayers[position] || {};

  const handleSeedChange = (position, value) => {
    const newSeeds = [...seeds];
    newSeeds[position] = value;
    setSeeds(newSeeds);
  };

  const handleATPPlayerChange = (position, player) => {
    const newATPPlayers = [...ATPPlayers];
    newATPPlayers[position] = player;
    setATPPlayers(newATPPlayers);
  };

  return (
    <div>
      {Array.from(Array(128)).map((p, index) => {
        const oddIndex = index * 2 + 1;

        return (
          <div key={index}>
            <div className="player">
              {/* Incorporate your ATPPlayerFinderWrapper or any other relevant component */}
              {/* Assuming it has a mechanism to transmit selected player data to the parent component */}
              <ATPPlayerFinderWrapper
                position={oddIndex}
                setATPPlayerId={setATPPlayerId}
                setCurrentPosition={setCurrentPosition}
                ATPPlayer={getCurrentATPPlayer(oddIndex)}
                onPlayerChange={(player) => handleATPPlayerChange(oddIndex, player)}
              />
            </div>
            <div className="seed">
              <TextField
                id={`seed${oddIndex}`}
                label="Seed"
                variant="standard"
                onChange={(e) => handleSeedChange(oddIndex, e.target.value)}
                InputProps={{ disableUnderline: true }}
                value={getCurrentSeed(oddIndex)}
              />
            </div>
          </div>
        );
      })}
    </div>
  );
};

Answer 2

To address this issue, the suggested approach is to store your array in a state and initialize each of its values as an empty string.

const [seeds, setSeeds] = useState(Array(128).fill(''));
const [ATPPlayers, setATPPlayers] = useState(Array(128).fill({}));

Subsequently, whenever there is a change in the state, update its value accordingly

const handleSeedChange = (position, value) => {
    const newSeeds = [...seeds];
    newSeeds[position] = value;
    setSeeds(newSeeds);
  };

  const handleATPPlayerChange = (position, player) => {
    const newATPPlayers = [...ATPPlayers];
    newATPPlayers[position] = player;
    setATPPlayers(newATPPlayers);
  };

Below is the complete code snippet tailored to resolve your particular problem:

import React, { useState } from 'react';

const TennisBracket = ({ games, round }) => {
  const [seeds, setSeeds] = useState(Array(128).fill(''));
  const [ATPPlayers, setATPPlayers] = useState(Array(128).fill({}));

  const getCurrentSeed = (position) => seeds[position] || '';

  const getCurrentATPPlayer = (position) => ATPPlayers[position] || {};

  const handleSeedChange = (position, value) => {
    const newSeeds = [...seeds];
    newSeeds[position] = value;
    setSeeds(newSeeds);
  };

  const handleATPPlayerChange = (position, player) => {
    const newATPPlayers = [...ATPPlayers];
    newATPPlayers[position] = player;
    setATPPlayers(newATPPlayers);
  };

  return (
    <div>
      {Array.from(Array(128)).map((p, index) => {
        const oddIndex = index * 2 + 1;

        return (
          <div key={index}>
            <div className="player">
              {/* Incorporate your ATPPlayerFinderWrapper or any other relevant component */}
              {/* Assuming it has a mechanism to transmit selected player data to the parent component */}
              <ATPPlayerFinderWrapper
                position={oddIndex}
                setATPPlayerId={setATPPlayerId}
                setCurrentPosition={setCurrentPosition}
                ATPPlayer={getCurrentATPPlayer(oddIndex)}
                onPlayerChange={(player) => handleATPPlayerChange(oddIndex, player)}
              />
            </div>
            <div className="seed">
              <TextField
                id={`seed${oddIndex}`}
                label="Seed"
                variant="standard"
                onChange={(e) => handleSeedChange(oddIndex, e.target.value)}
                InputProps={{ disableUnderline: true }}
                value={getCurrentSeed(oddIndex)}
              />
            </div>
          </div>
        );
      })}
    </div>
  );
};

Controlling various states within React can be a challenging task to

Answer №1

Similar questions

Low scoring performance in Lighthouse on a nearly empty page built with Next.js

Empty nested Map in POST request

Switching from HTTP to HTTPS with Express and Heroku

Tutorial on how to update a specific value in an array of objects using setState on click event

Whenever a button is clicked in a custom column rendering of a React material table, the sorted state is lost. This issue occurs whenever any state update is triggered

nextjs dynamic routing is not compatible with the next-i18next framework

When clicked, the onClick feature will reduce the number each time instead of initiating the timer

Using a customHook to dynamically swap images in React

What is the proper way to utilize the router next function for optimal performance

Error encountered: No matching overload found for MUI styled TypeScript

Struggling to add Material UI to my fresh React project

How can a server component be rendered conditionally based on the state set in the client component?

How can I intercept/manage the back button of the browser in React-router?

Solving the issue of duplicate activeClassName in React

Display the initial MUI components from an array of data in a distinctive manner

Supabase is encountering an issue: 'TypeError: fetch failed'

Testing a component with React Testing Library and Jest while passing a boolean value: step-by-step guide

Leverage the power of Google Maps within your Next JS application

Experiencing a repetitive occurrence of the error: "SyntaxError: Encountered an invalid or unfore

cleaner urls using nextjs routing