React Functional Component Rendering Old Data - reactjs

Question

I'm trying to setup a piece of code into its own component, however, by doing so the data doesn't show up after doing it:
Code StackBlitz Example
As you see from the picture, both of the inputs from the component setup are blank. I'm assuming that it might have something to do with closures, but I'm not sure, and even more confused as how to resolve the issue.
App.tsx
import React, { useEffect, useState } from 'react';
import axios from 'axios';
import { SimpleTable } from './components/SimpleTable/SimpleTable';
import ITableCol from './components/SimpleTable/ITableCol';
interface IItem {
userId: number;
id: number;
title: string;
body: string;
}
interface IIdItem {
[key: string]: number;
}
export const App = () => {
const getItems = async () => {
const res = await axios.get('https://jsonplaceholder.typicode.com/posts');
const twoItems = [res.data[0], res.data[1]];
setItems(twoItems);
};
const getTableCols = (): ITableCol[] => {
return [
{
title: 'title',
renderFn: renderTitle,
},
{
title: 'input',
renderFn: renderInput,
},
];
};
const processData = () => {
let _idValues = { ...idValues };
for (const item of items) {
if (!_idValues[item.title]) {
_idValues[item.title] = item.id * 5;
}
}
return _idValues;
};
const renderTitle = (item: IItem) => {
return <div className="">{item.title}</div>;
};
const handleChange = (e: ChangeEvent<any>) => {};
const renderInput = (item: IItem) => {
const valueItem = idValues[item.title];
return (
<div className="">
<div>Id: {item.id}</div>
<div>
<input type="number" value={valueItem} onChange={handleChange} />
</div>
</div>
);
};
useEffect(() => {
getItems();
}, []);
const [items, setItems] = useState<IItem[]>([]);
const [idValues, setIdValues] = useState<IIdItem>({});
const [tableCols, setTableCols] = useState<ITableCol[]>([]);
useEffect(() => {
setTableCols(getTableCols());
setIdValues(processData());
}, [items]);
return (
<div className="p-2">
<h1>State Issue Example</h1>
<div className="mb-5">
<div>Simple Table</div>
<SimpleTable data={items} cols={tableCols} />
</div>
<div>
<div>Non Componentized Table</div>
<div className="d-flex">
<div className="w-50">
<b>title</b>
</div>
<div className="w-50">
<b>input</b>
</div>
</div>
</div>
<div>
{items.map((item) => {
return (
<div className="d-flex">
<div className="w-50">{renderTitle(item)}</div>
<div className="w-50">{renderInput(item)}</div>
</div>
);
})}
</div>
</div>
);
};
SimpleCode.tsx
import React, { useState } from 'react';
import ITableCol from '../SimpleTable/ITableCol';
type Props = {
cols: ITableCol[];
data: any[];
};
export const SimpleTable: React.FC<Props> = (props) => {
return (
<div>
<div className="d-flex">
{props.cols.map((col) => {
return (
<div className="w-50">
<b>{col.title}</b>
</div>
);
})}
</div>
{props.data.map((data, index) => {
return (
<div className="d-flex" key={'data-' + index}>
{props.cols.map((col, index) => {
return (
<div key={data.id} className="w-50">
{col.renderFn(data, index)}
</div>
);
})}
</div>
);
})}
<div>Data Size: {props.data.length}</div>
</div>
);
};
ITableCol.tsx
export default interface ITableCol {
renderFn: (item: any, index: number) => void;
title: string;
}

Answer 1

Problem is getTableCols gets render even before API response. Using two useEffect would have solved your issue.Screenshot of the Solution
useEffect(() => {
setIdValues(processData());
}, [items]);
useEffect(() => {
setTableCols(getTableCols());
}, [idValues]);
Given below is the full code of App.tsx
import React, { useEffect, useState } from 'react';
import axios from 'axios';
import { SimpleTable } from './components/SimpleTable/SimpleTable';
import ITableCol from './components/SimpleTable/ITableCol';
interface IItem {
userId: number;
id: number;
title: string;
body: string;
}
interface IIdItem {
[key: string]: number;
}
export const App = () => {
const getItems = async () => {
const res = await axios.get('https://jsonplaceholder.typicode.com/posts');
const twoItems = [res.data[0], res.data[1]];
setItems(twoItems);
};
const getTableCols = (): ITableCol[] => {
return [
{
title: 'title',
renderFn: renderTitle,
},
{
title: 'input',
renderFn: renderInput,
},
];
};
const processData = () => {
let _idValues = { ...idValues };
for (const item of items) {
if (!_idValues[item.title]) {
_idValues[item.title] = item.id * 5;
}
}
return _idValues;
};
const renderTitle = (item: IItem) => {
return <div className=""> {item.title}</div>;
};
const handleChange = (e: ChangeEvent<any>) => {};
const renderInput = (item: IItem) => {
const valueItem = idValues[item.title];
return (
<div className="">
<div>Id: {item.id}</div>
<div>valueItem: {valueItem}</div>
<div>
<input type="number" value={valueItem} onChange={handleChange} />
</div>
</div>
);
};
useEffect(() => {
getItems();
}, []);
const [items, setItems] = useState<IItem[]>([]);
const [idValues, setIdValues] = useState<IIdItem>({});
const [tableCols, setTableCols] = useState<ITableCol[]>([]);
useEffect(() => {
setIdValues(processData());
}, [items]);
useEffect(() => {
setTableCols(getTableCols());
}, [idValues]);
return (
<div className="p-2">
<h1>State Issue Example</h1>
<div className="mb-5">
<div>Simple Table</div>
<SimpleTable data={items} cols={tableCols} />
</div>
<div>
<div>Non Componentized Table</div>
<div className="d-flex">
<div className="w-50">
<b>title</b>
</div>
<div className="w-50">
<b>input</b>
</div>
</div>
</div>
<div>
{items.map((item, i) => {
return (
<div key={i} className="d-flex">
<div className="w-50">{renderTitle(item)}</div>
<div className="w-50">{renderInput(item)}</div>
</div>
);
})}
</div>
</div>
);
};