Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – I'm new to React, I'm trying to solve this with a basic logic. Can anyone help me out

(Updated code anyone have another logic then please share)
I’m trying to set state for a team but I’m not able to do it.

I want to set individual state for each team without using any advance logic.

I tried many thing in code but nothing works. The state should be change for the team who’s button is clicked and others remains same.


const PointsTable = () => {
    const [teams,setTeam] = useState({
        CSK: { matchesPlayed: 0, wins: 0, loses: 0, points: 0 },
        MI: { matchesPlayed: 0, wins: 0, loses: 0, points: 0 },
        KKR: { matchesPlayed: 0, wins: 0, loses: 0, points: 0 },
        GT: { matchesPlayed: 0, wins: 0, loses: 0, points: 0 }
    });

    function input(team) {
        var teamName = team;
        var matches = prompt("Enter total matches played: ");
        var win = prompt("Enter total matches won: ");
        var lose = matches - win;
        var point = win * 2;

        teams[teamName].matchesPlayed = matches;
        teams[teamName].wins = win;
        teams[teamName].loses = lose;
        teams[teamName].points = point;

        setTeam({ ...teams });

    }

    return (
        <div>
            <h2>IPL Points Table</h2>
            <table border={1} cellPadding={20} cellSpacing={0}>
                <thead>
                    <tr>
                        <th></th>
                        <th>Total Matches Played</th>
                        <th>Wins</th>
                        <th>Loses</th>
                        <th>Points</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>CSK</td>
                        <td>{teams.CSK.matchesPlayed}</td>
                        <td>{teams.CSK.wins}</td>
                        <td>{teams.CSK.loses}</td>
                        <td>{teams.CSK.points}</td>
                        <td><button value='CSK' onClick={() => input("CSK")}>CSK</button></td>
                    </tr>
                    <tr>
                        <td>MI</td>
                        <td>{teams.MI.matchesPlayed}</td>
                        <td>{teams.MI.wins}</td>
                        <td>{teams.MI.loses}</td>
                        <td>{teams.MI.points}</td>
                        <td><button value='MI' onClick={() => input("MI")}>MI</button></td>
                    </tr>
                    <tr>
                        <td>KKR</td>
                        <td>{teams.KKR.matchesPlayed}</td>
                        <td>{teams.KKR.wins}</td>
                        <td>{teams.KKR.loses}</td>
                        <td>{teams.KKR.points}</td>
                        <td><button value='KKR' onClick={() => input("KKR")}>KKR</button></td>
                    </tr>
                    <tr>
                        <td>GT</td>
                        <td>{teams.GT.matchesPlayed}</td>
                        <td>{teams.GT.wins}</td>
                        <td>{teams.GT.loses}</td>
                        <td>{teams.GT.points}</td>
                        <td><button value='GT' onClick={() => input("GT")}>GT</button></td>
                    </tr>
                </tbody>
            </table>
        </div>
    );
};

export default PointsTable;

I’m trying to set state for a team but I’m not able to do it.

Tags:

3

Answers


  1. 0

    Your useState() hook usage is wrong.
    You should initialise it like this:

     const [teams, setTeams] = useState({ 
         // stays the same
    });

    Then you use setTeams to change the value of teams.

    Login or Signup to reply.
  2. 0

    Your usage of useState is incorrect. useState returns an array containing a state object and a "setter method" that updates the state object. This allows for updating a state object through the React rendering lifecycle. You cannot update a state variable directly, as you have tried.

    Instead you should use the setter method, something like this:

    const [teams, setTeams] = useState({
    CSK: { matchesPlayed: 0, wins: 0, loses: 0, points: 0 },
    MI: { matchesPlayed: 0, wins: 0, loses: 0, points: 0 },
    KKR: { matchesPlayed: 0, wins: 0, loses: 0, points: 0 },
    GT: { matchesPlayed: 0, wins: 0, loses: 0, points: 0 }
});

function handleInput(teamName) {
    const matches = prompt("Enter total matches played: ");
    const win = prompt("Enter total matches won: ");
    const lose = matches - win;
    const point = win * 2;

    setTeams(prevTeams => ({
        ...prevTeams,
        [teamName]: {
            matchesPlayed: matches,
            wins: win,
            loses: lose,
            points: point
        }
    }));
}

    The JSX HTML would look like this:

    return (
    <div>
        <h2>IPL Points Table</h2>
        <table border={1} cellPadding={20} cellSpacing={0}>
            <thead>
                <tr>
                    <th></th>
                    <th>Total Matches Played</th>
                    <th>Wins</th>
                    <th>Loses</th>
                    <th>Points</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>CSK</td>
                    <td>{teams.CSK.matchesPlayed}</td>
                    <td>{teams.CSK.wins}</td>
                    <td>{teams.CSK.loses}</td>
                    <td>{teams.CSK.points}</td>
                    <td><button onClick={() => handleInput("CSK")}>CSK</button></td>
                </tr>
                <tr>
                    <td>MI</td>
                    <td>{teams.MI.matchesPlayed}</td>
                    <td>{teams.MI.wins}</td>
                    <td>{teams.MI.loses}</td>
                    <td>{teams.MI.points}</td>
                    <td><button onClick={() => handleInput("MI")}>MI</button></td>
                </tr>
                <tr>
                    <td>KKR</td>
                    <td>{teams.KKR.matchesPlayed}</td>
                    <td>{teams.KKR.wins}</td>
                    <td>{teams.KKR.loses}</td>
                    <td>{teams.KKR.points}</td>
                    <td><button onClick={() => handleInput("KKR")}>KKR</button></td>
                </tr>
                <tr>
                    <td>GT</td>
                    <td>{teams.GT.matchesPlayed}</td>
                    <td>{teams.GT.wins}</td>
                    <td>{teams.GT.loses}</td>
                    <td>{teams.GT.points}</td>
                    <td><button onClick={() => handleInput("GT")}>GT</button></td>
                </tr>
            </tbody>
        </table>
    </div>
);

    Additionally, I wouldn’t use prompt here to update the values, but instead I’d create some React component or HTML input that handles the new data, perhaps as Form Fields or within a Modal.

    Login or Signup to reply.
  3. 0

    Here is the entire working code with some improvements. I believe the other comments have already explained the issues with this.

    import React from 'react';
import { useState } from 'react'

export function App(props) {
  const [teams, setTeams] = useState({
    CSK: { matchesPlayed: 0, wins: 0, loses: 0, points: 0 },
    MI: { matchesPlayed: 0, wins: 0, loses: 0, points: 0 },
    KKR: { matchesPlayed: 0, wins: 0, loses: 0, points: 0 },
    GT: { matchesPlayed: 0, wins: 0, loses: 0, points: 0 }
  });

  function input(teamName) {
    var matches = +prompt("Enter total matches played: ");
    var win = +prompt("Enter total matches won: ");
    var lose = matches - win;
    var point = win * 2;
    console.log(teamName, matches, win, lose, point)

    let newTeams = {...teams}

    newTeams[teamName].matchesPlayed = matches;
    newTeams[teamName].wins = win;
    newTeams[teamName].loses = lose;
    newTeams[teamName].points = point;

    setTeams(newTeams)
  }

  return (
    <div>
      <h2>IPL Points Table</h2>
      <table border={1} cellPadding={20} cellSpacing={0}>
        <thead>
          <tr>
            <th></th>
            <th>Total Matches Played</th>
            <th>Wins</th>
            <th>Loses</th>
            <th>Points</th>
          </tr>
        </thead>
        <tbody>
          {
            Object.keys(teams).map((key) => {
              return (
                <tr key={key}>
                  <td>{key}</td>
                  <td>{teams[key].matchesPlayed}</td>
                  <td>{teams[key].wins}</td>
                  <td>{teams[key].loses}</td>
                  <td>{teams[key].points}</td>
                  <td><button onClick={() => input(key)}>{key}</button></td>
                </tr>
              )
            })
          }
        </tbody>
      </table>
    </div>
  );
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search