We Keep Coding

Input loses focus when I try to change an array element within an object managed by state hooks

The following is probably the neatest code that illustrates my problem I could think of. I am essentially trying to draw a table to the page that pulls exercise data from a database, sets that data to a state of an array of objects, and then when a row is clicked, render an 'edit' row below it that allows the user to change any of the array data inside one of those objects.
import React, {useEffect} from "react";
import { useState } from "react";
import { useNavigate } from "react-router";
export default function GetProgram() {
// holds all n number of exercises from database
const [exercises, setExercises] = useState([])
// number that holds which exercises is currently being shown/edited
const [editingExerciseIndex, setEditingExerciseIndex] = useState(-1)
// once both effects have fetched the data
const [loading, setLoading] = useState([true, true])
// holds info about the program to map for exercise displaying
const [program, setProgram] = useState({
days: [],
name : '',
_id : null
})
useEffect(() => {
async function getProgramInfo() {
fetch(`http://localhost:5000/program`).then((res) => {
res.json().then((body) => {
setProgram(body)
setLoading([false, loading[1]])
})
})
.catch((err) => {
console.log(`**ERR: ${err}`)
return
})
}
getProgramInfo()
}, [])
useEffect(() => {
async function getExercises() {
fetch(`http://localhost:5000/program/getmap`).then((res) =>{
res.json().then((body) => {
setExercises(body)
setLoading([loading[0], false])
})
})
}
getExercises()
}, [])
// onChange handler for edit fields
function updateField(props) {
var newExercise;
if (props.reps) {
const newReps = exercises[props.j].reps.map((r, i) => {
if (i === props.set-1) {
return parseInt(props.reps,10) // user's input
}
return r // old value
})
newExercise = {...exercises[props.j], reps:newReps} // []
console.log(newExercise)
}
else {
const newWeight = exercises[props.j].weight.map((w, i) => {
if (i === props.set-1) {
return parseInt(props.weight,10)
}
return w
})
newExercise = {...exercises[props.j], weight:newWeight}
}
console.log([...exercises, newExercise])
setExercises(exercises.map((exercise, i) => {
if (exercise.day === newExercise.day && exercise.position === newExercise.position) {
return newExercise
}
return exercise
}))
}
const EditFieldRow = (props) => {
console.log("Rendering Edit Field Row")
return (
<tr>
<td>{props.set}</td>
<td><input key="reps-input" type="text" value={props.reps} onChange={(e) => updateField({j:props.j, set:props.set, reps:e.target.value})}/></td>
<td><input key="weight-input" type="text" value={props.weight} onChange={(e) => updateField({j:props.j, set:props.set, weight:e.target.value})}/></td>
</tr>
)
}
const EditField = (props) => {
return (
<div>
<form onSubmit={() => console.log("submitted")}>
<table className="table table-bordered table-colored">
<thead>
<tr>
<th>Set</th>
<th>Reps</th>
<th>Weight</th>
</tr>
</thead>
<tbody>
{[...Array(props.exercise.sets).keys()].map((i) => {
return (
<EditFieldRow j={props.j} key={`fieldrow-${i}`} set={i+1} reps={props.exercise.reps[i]} weight={props.exercise.weight[i]}/>
)
})}
</tbody>
</table>
</form>
</div>
)
}
const PageContent = (props) => {
return (
<div className="container-fluid page-content program-page" >
<h2 style={{textAlign:'center'}}>{program.rname??program.name} Program</h2>
<div className="row">
{program.dayMap.map((day, i) => {
return (
<div className="col" key={`${day}-${i}`}>
<h4>{day}</h4>
<hr />
<table className="lift-table table table-bordered table-colored">
<thead>
<tr>
<th>Name</th>
<th>Sets</th>
</tr>
</thead>
{exercises.map((exercise, j) => {
if (exercise.day === i+1) {
return (
<tbody key={`${exercise.name}${i}${j}${day}`}>
<tr id={`exercise-row-${exercise.name.replaceAll(" ", "-")}`} className={`exercise-row`}
onClick={() => {
setEditingExerciseIndex(j)
}}
key={`${exercise.name}-${i}-${day}`}
>
<td>{exercise.name}</td>
<td>{exercise.sets}</td>
</tr>
{editingExerciseIndex === j && <tr><td colSpan="2">
<EditField exercise={exercises[j]} j={j}/>
</td></tr>}
</tbody>
)
}
})}
</table>
</div>
)
})}
</div>
</div>
)
}
if (program.dayMap) {
return (
<PageContent />
)
}
return (
<div></div>
)
}
The exercises array would look something like this
{
"program" : "Full-body-3d",
"name" : "Bench Press",
"position" : 1,
"day" : 1,
"sets" : 3,
"reps" : [
6, 6, 6
],
"ref" : "Bench",
"weight" : [
80, 80, 80
]
},
{
"program" : "Full-body-3d",
"name" : "Lat Pulldown",
"position" : 2,
"day" : 1,
"sets" : 3,
"reps" : [
12, 12, 12
],
"ref" : "Accessory",
"weight" : [
80, 80, 80
]
},
...
Where
position - order of the exercise to perform
day - day that is mapped to said exercise (ex. 1 might represent "Push day")
sets - will always be the length of reps[] and weight[] (not strictly necessary)
the rest aren't extremely important
This is my App.js that routes all pages:
import React, { useEffect, useState } from "react";
// We use Route in order to define the different routes of our application
import { Route, Routes } from "react-router-dom";
import { useCookies } from 'react-cookie';
// We import all the components we need in our app
import NB from "./components/navbar";
import WorkoutCalendar from "./components/workoutCalendar";
import Edit from "./components/edit";
import Create from "./components/create";
import Settings from "./components/settings";
import Header from "./components/header";
import Progress from "./components/progress";
import DayInfo from "./components/dayInfoPage";
import Delete from "./components/deleteall";
import Todo from "./components/dev/todo";
import GetProgram from "./components/lift/programPage";
import AddLift from "./components/lift/create";
import Populate from "./components/dev/pop_db";
import PopulateColorThemes from "./components/dev/pop_colors";
import UserList from "./components/user/list";
import UserLogin from "./components/user/login";
import Rec from "./components/rec";
const App = () => {
const [cookies, setCookie] = useCookies(['theme'])
const [loading, setLoading] = useState(true)
useEffect(() => {
setCookie('ColorTheme', cookies.ColorTheme ?? 'Ender', {path:'/'})
setLoading(false)
},[])
const [username, setUsername] = useState('');
if (loading) {
return (
<div className="page" style={{backgroundColor:'grey'}}></div>
)
}
else {
return (
<div className="page" data-theme={cookies.ColorTheme??'Ender'}>
{/* navbar */}
<NB />
{/* header */}
<Header username={username}/>
{/* content */}
<div className="page-content-area">
<Routes>
<Route exact path="/" element={<WorkoutCalendar />} />
<Route path="/edit/:id" element={<Edit />} />
<Route path="/record/create" element={<Create />} />
<Route path="/settings" element={<Settings />} />
<Route path="/record/:date" element={<DayInfo />} />
<Route path="/deleteall" element={<Delete />} />
<Route path="/dev/todo" element={<Todo />} />
<Route path="/program" element={<GetProgram />} />
<Route path="/lift/add" element={<AddLift />} />
<Route path="/program/populate" element={<Populate />} />
<Route path="/user" element={<UserList />} />
<Route path="/user/login" element={<UserLogin headerUsername={setUsername}/>} />
<Route path="/color/populate" element={<PopulateColorThemes />} />
<Route path="/record" element={<Rec />} />
</Routes>
</div>
</div>
);
}
};
export default App;
And finally index.js which renders the components
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { BrowserRouter } from "react-router-dom";
import {CookiesProvider} from 'react-cookie'
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<CookiesProvider>
<BrowserRouter>
<App />
</BrowserRouter>
</CookiesProvider>
</React.StrictMode>,
);
I cannot seem to find where I am going wrong despite reading tons of other posts with similar situations, but different causal issues. I've looked at In React ES6, why does the input field lose focus after typing a character?
and it seems like its almost always caused by rendering a form in a function inside render(). I don't quite know where that would be happening or how to avoid it.
I tried refactoring all of the components into the smallest pieces possible, keeping them all clumped as one. I tried adding keys to every element that would be effected, using an individual state hook that would track only the selected exercise and edit/display based off that rather than directly editing the single exercises state array. I expected this to be a solved problem, since I cannot imagine I am the first person to want to do something like this with a data structure similar to mine

How to use functional component in ReactJs

I am working in Reactjs and i am using Nextjs framework, Right now i am tyring to fetch data from database using nextjs, But right now i am getting following error
TypeError: Cannot read property 'id' of undefined,How can i remove this ? Here is my current code
import { Box, Heading } from "#chakra-ui/react";
export async function getStaticProps() {
const response = await fetch("https://fakestoreapi.com/products");
const data = await response.json();
return {
props: {
products,
},
};
}
function Test({products}) {
return (
<Box>
{products.map((product) => (
<Box>
<Text> {product.title} </Text>
</Box>
))}
</Box>
);
}
export default Test;
Here is my index.js file
import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.css'
import Test from '../components/testing/test'
export default function Home() {
return (
<div className={styles.container}>
<Test/>
</div>
)
}

look i think i know where the problem is :
the first problem is that you are using the getStaticProps function in a components while it can only be used in a page (the files inside the pages/ folder) so we need first to move it to index.js like this
index.js
import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.css'
import Test from '../components/testing/test'
export async function getStaticProps() {
const response = await fetch("https://fakestoreapi.com/products");
const products= await response.json(); //<- i changed this becaus it was wrong
return {
props: {
products,
},
};
}
export default function Home({products}) {
return (
<div className={styles.container}>
<Test products={products}/>
</div>
)
}
test.js
import { Box, Heading } from "#chakra-ui/react";
function Test({products}) {
return (
<Box>
{products.map((product) => (
<Box key={product.id}>
<Text> {product.title} </Text>
</Box>
))}
</Box>
);
}
export default Test;
the code above worked for me as it is 'except that my link is different of course'
the second problem is that you were getting your data in the data variable
const data = await response.json();
while returning products variable which is undefined
return {
props: {
products,
},
};
i changed it in your code so it became
const products= await response.json(); //<- i changed this becaus it was wrong
return {
props: {
products,
},
now that should work (it worked in my local envirements)
Notes
i added a key in your map function
<Box>
{products.map((product) => (
<Box key={product.id}>
<Text> {product.title} </Text>
</Box>
))}
</Box>
so it don't give you a warning but thats only possible if your product have an id property so if it gave you an error about id property just remove it.
second notes is that my products is structured like this
[
{
"id": "12346",
"title": " test"
},
{
"id": "154346",
"title": " just"
},
{
"id": "169346",
"title": " another"
},
{
"id": "154326",
"title": " example"
}
]
so if your structur is different it may cause problems

first of all you should pass key value in map function like key={products.id},
and in the next step check part of code
return {
props: {
products,
},
};
do you want to pass products as props or data as props?
and check whether API link https://fakestoreapi.com/products is correct?
in the last step, check response in console.log().

React.js Tables showing key error in console

I rendered a table of inventory a small business carries (stored in JSON file).
I get this error in my console:
"Warning: Each child in a list should have a unique "key" prop.
Check the render method of Table
My App returns Table
<Table wines={wines}/>
My Table component:
import React from 'react'
import Row from './Row'
const Table = ({ wines,wine }) => {
return (
<div >
<table >
<tbody >
{wines.map(wine =>(
<Row wine={wine}/>
))}
</tbody>
</table>
</div>
)
}
export default Table
Row component:
import React from 'react'
import Cell from './Cell'
const Row = ({ wine }) => {
return (
<tr>
{Object.entries(wine).map(([key, value]) => {
return (
<Cell key={key} cellData={JSON.stringify(value)}/>
)
} ) }
</tr>
)
}
export default Row
Cell component:
import React from 'react'
const Cell = ({cellData,wine}) => {
return (
<td >
{cellData}
</td>
)
}
export default Cell
The table renders fine with the data, but I cannot understand why that error above still appears in the console. I am new to React and in the learning process. Thank you.

In your Table component, there is a key prop missing, eg:
{wines.map(wine =>(
<Row key={wine} wine={wine}/>
))}
It's important that the key prop is something unique to the item being iterated, as this is used to ensure the correct items are being updated, in the case where the component has to be re-rendered.

React holds state of no more than one array element

I've come to a halt making this covid19 app where I can see a list of countries on the left side of the screen with the option of adding any number of countries to the right side of the screen, which displays more covid data of the added country. I'm also kinda new to React.
Problem is, when I click the add button the added state is updated, and it displays that added country on the right side of the screen. But, when I try adding another country I get an error. I believe the error is somewhere around when I try to setState({ state }) in the addCountry method from within App.js.
In other words, the 'added' state is only letting itself hold no more than one array element. Help much much much appreciated. I posted all the code.
index.js
import ReactDOM from 'react-dom';
import 'bootstrap/dist/css/bootstrap.min.css';
import './index.css';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
App.js
import CountryList from "./components/CountryList.js";
import Find from "./components/Find.js";
import Added from "./components/Added.js";
class App extends Component {
constructor() {
super();
this.state = {
countries: [],
inputbox: [],
added: [],
};
}
// Arrow functions capture "this" when they are defined, while standard functions do when they are executed.
// Thus, no need for the bind method. Awesome.
handleChange = (e) =>
this.setState({
inputbox: e.target.value,
});
getCountryData = async (slug) => {
const resp = await fetch(`https://api.covid19api.com/live/country/${slug}`);
var addedData = await resp.json();
// Api returns most days of covid, per country, that it tracks
// Thus, we want the last tracked day of a country
addedData = addedData[addedData.length - 1];
return addedData;
};
// Add a country to the added state
// Call when user clicks button associated with their desired country
addCountry = async (btnId) => {
const { countries, added } = this.state;
var addedData = await this.getCountryData(btnId);
countries.map((country) => {
// If the button ID is equal to the current country in the loops' Slug
if (btnId == country.Slug) {
try {
added.push([
{
addedCountry: addedData.Country,
confirmedTotal: addedData.Confirmed,
deathsTotal: addedData.Deaths,
recoveredTotal: addedData.Recovered,
activeTotal: addedData.Active,
},
]);
// (bug) IT IS PUSHING, BUT ITS NOT SETTING THE STATE!
// ITS ONLY LETTING ME KEEP ONE ITEM IN THE STATE
this.setState({ added });
console.log(added);
} catch (error) {
alert(`Sorry, country data not available for ${country.Country}`);
return;
}
}
});
};
removeCountry = (btnId) => {
const { added } = this.state;
added.map((added, index) => {
//console.log(added[index].addedCountry);
if (btnId == added[index].addedCountry) {
added.splice(index, 1);
this.setState({ added: added });
} else {
console.log("not removed");
return;
}
});
};
// Mount-on lifecycle method
async componentDidMount() {
const resp = await fetch("https://api.covid19api.com/countries");
const countries = await resp.json(); // parsed response
this.setState({ countries }); // set state to parsed response
}
render() {
// Filter out countries depending on what state the inputbox is in
const { countries, inputbox } = this.state;
const filtered = countries.filter((country) =>
country.Country.includes(inputbox)
);
return (
<div className="App Container">
<Find
placeholder="Type to find a country of interest..."
handleChange={this.handleChange}
/>
<div className="row">
<CountryList countries={filtered} addCountry={this.addCountry} />
<Added added={this.state.added} removeCountry={this.removeCountry} />
</div>
</div>
);
}
}
export default App;
Added.js
import React, { Component } from "react";
import { Table, Form, Input, Button } from "reactstrap";
import AddedCountry from "./AddedCountry.js";
class Added extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div className="col-md-6">
<Table>
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Country</th>
<th scope="col">Active</th>
<th scope="col">Confirmed Total</th>
<th scope="col">Recovered</th>
<th scope="col">Deaths</th>
<th scope="col">Action</th>
</tr>
</thead>
{this.props.added.map((added, index) => (
<AddedCountry
added={added[index]}
removeCountry={this.props.removeCountry}
/>
))}
</Table>
</div>
);
}
}
export default Added;
AddedCountry.js
import React, { Component } from "react";
import { Table, Form, Input, Button } from "reactstrap";
class AddedCountry extends Component {
constructor(props) {
super(props);
}
render() {
return (
<tbody>
<tr>
<td></td>
<td>{this.props.added.addedCountry}</td>
<td>{this.props.added.activeTotal}</td>
<td>{this.props.added.confirmedTotal}</td>
<td>{this.props.added.recoveredTotal}</td>
<td>{this.props.added.deathsTotal}</td>
<td>
{
<Button
onClick={() =>
this.props.removeCountry(
document.getElementById(this.props.added.addedCountry).id
)
}
id={this.props.added.addedCountry}
type="submit"
color="danger"
size="sm"
>
Remove
</Button>
}
</td>
</tr>
</tbody>
);
}
}
export default AddedCountry;
CountryList.js
import React, { Component } from "react";
import { Table, Form, Input, Button } from "reactstrap";
import Country from "./Country.js";
class CountryList extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div className="col-md-6">
<Table>
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Country</th>
<th scope="col">Actions</th>
</tr>
</thead>
{
// Each country is a component
// Function will display all countries as the Map function loops through them
this.props.countries.map((country) => (
<Country countries={country} addCountry={this.props.addCountry} />
))
}
</Table>
</div>
);
}
}
export default CountryList;
Country.js
import React, { Component } from "react";
import { Table, Form, Input, Button } from "reactstrap";
class Country extends Component {
constructor(props) {
super(props);
}
render() {
return (
<tbody>
<tr>
<td></td>
<td>{this.props.countries.Country}</td>
<td>
{
<Button
onClick={() =>
this.props.addCountry(
document.getElementById(this.props.countries.Slug).id
)
}
id={this.props.countries.Slug}
type="submit"
color="success"
size="sm"
>
Add
</Button>
}
</td>
</tr>
</tbody>
);
}
}
export default Country;
Find.js
import React, { Component } from "react";
import { Table, Form, Input, Button } from "reactstrap";
class Find extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div className="Find container">
<br />
<Form>
<div className="form-row">
<div className="form-group col-md-6">
<h3>Find a Country</h3>
<Input
type="text"
className="form-control"
id="country"
placeholder={this.props.placeholder}
onChange={this.props.handleChange}
></Input>
</div>
</div>
</Form>
</div>
);
}
}
export default Find;

I haven't pored over all that code, but focusing right where you think the issue is it is obvious you are mutating your state object by pushing directly into the added array.
Solution
Don't mutate state!
Since it seems you only want to add a single new "add" and only when the button's btnId matches a country's slug, and the btnId can only ever be a valid value from the mapped countries array, I think this can be greatly simplified.
addCountry = async (btnId) => {
const addedData = await this.getCountryData(btnId);
if (addedData) {
this.setState(prevState => ({
added: prevState.added.concat({ // <-- concat creates a new array reference
addedCountry: addedData.Country,
confirmedTotal: addedData.Confirmed,
deathsTotal: addedData.Deaths,
recoveredTotal: addedData.Recovered,
activeTotal: addedData.Active,
}),
}));
} else {
alert(`Sorry, country data not available for ${country.Country}`);
}
};
Similarly the removeCountry handler is mis-using the array mapping function and mutating the added state. Array.prototype.filter is the idiomatic way to remove an element from an array and return the new array reference.
removeCountry = (btnId) => {
this.setState(prevState => ({
added: prevState.added.filter(el => el.addedCountry !== btnId),
}));
};
Additional Issues & Suggestions
Added.js
If you maintain the added array as a flat array (not an array of arrays) then it's trivial to map the values.
{this.props.added.map((added) => (
<AddedCountry
key={added}
added={added}
removeCountry={this.props.removeCountry}
/>
))}
Country.js & AddedCountry.js
I don't see any reason to query the DOM for the button id when you are literally right there and can enclose the country slug in the onClick callback.
<Button
onClick={() => this.props.addCountry(this.props.countries.Slug)}
id={this.props.countries.Slug}
type="submit"
color="success"
size="sm"
>
Add
</Button>
<Button
onClick={() => this.props.removeCountry(this.props.added.addedCountry)}
id={this.props.added.addedCountry}
type="submit"
color="danger"
size="sm"
>
Remove
</Button>
App.js
This may or may not matter, but it is often the case to do case-insensitive search/filtering of data. This is to ensure something like "France" still matching a user's search input of "france".
const filtered = countries.filter((country) =>
country.Country.toLowerCase().includes(inputbox.toLowerCase())
);

ReactJS: How to get the data of a table row that has changed

I have a main Table component that maintains the table's state. I have a dumb component which gets props from the main component. I use it to render the table row layout. I am trying to make this table editable. For this reason, I need a way to find out which tr was edited. Is there a way to get access to the tr key using which I can get access to the whole object?

No you can't get the value of a key in a child prop. From the docs:
Keys serve as a hint to React but they don’t get passed to your
components. If you need the same value in your component, pass it
explicitly as a prop with a different name
const content = posts.map((post) =>
<Post
key={post.id}
id={post.id}
title={post.title} />
);
A possible solution right of my head might be the following:
import React from 'react';
class Table extends React.Component {
constructor(props) {
super(props);
this.state = {
rows: [
{
id: 0,
title: "ABC"
},
{
id: 1,
title: "DEF"
},
{
id: 2,
title: "GHI"
}
]
}
}
render() {
return <table>
<tbody>
{
this.state.rows.map((item) => <Row key={item.id} item={item} updateItem={this.updateItem} />)
}
</tbody>
</table>
}
updateItem = (newItemData) => {
const index = this.state.rows.findIndex((r) => r.id == newItemData.id);
let updatedRows = this.state.rows;
updatedRows.splice(index, 1, newItemData);
this.setState({
rows: updatedRows
});
}
}
const Row = ({item, updateItem}) => {
const [title, setValue] = React.useState(item.title);
return <tr>
<td>{item.id}</td>
<td>
<input type="text" value={title} onChange={(e) => setValue(e.currentTarget.value)} />
</td>
<td>
<button onClick={() => updateItem({...item, title})}>Save</button>
</td>
</tr>
};

If you want to send from nested component to parent some data use a callback function