Validation in react - reactjs

Question

I need your help. I'm trying to validate the input as well as do a search. I take data from JSON placeholder. I have the functionality that you can get the whole list, and you can get it separately, by id.
There are no errors in the console, but not everything works. When I try to get lists of posts, photos, albums, and posts, I do not see anything, but I wrote the logic of drawing elements to each of the endpoints. What is my mistake? Thank you very much
import React, {useState} from "react";
export let Inputs = () => {
const Base_Url = 'https://jsonplaceholder.typicode.com'
const availableResources = ['posts', 'comments', 'photos', 'albums', 'todos', 'users']
const [endPoint, setEndpoint] = useState('');
const [id, setId] = useState('');
const [items, setItems] = useState([]);
const [singleItem, setSingleItem] = useState(null);
const [error, setError] = useState('');
const onSubmit = () => {
if (!endPoint){
return setError('First Input Is Required')
}
if (!availableResources.includes(endPoint)) {
return setError('Value is not valid')
}
const idToNub = Number(id);
if (!idToNub && id !== '') return
fetchData()
setError('')
}
const fetchData = async () => {
const response = await fetch(`${Base_Url}/${endPoint.trim()}/${id.trim()}`)
const data = await response.json()
if (id) {
setSingleItem(data)
setItems([])
return
}
setSingleItem(null)
setItems(data)
}
return (
<div>
<input
type="text"
placeholder="Type posts, comments, todos"
value={endPoint}
onChange={({target : {value}}) => setEndpoint(value)}
/>
<input
type="text"
placeholder="Type id number"
value={id}
onChange={({target : {value}}) => setId(value)}
/>
<button onClick={onSubmit}>Fetch Data</button>
<pre>{singleItem && JSON.stringify(singleItem, null)}</pre>
<h1>{error}</h1>
{items.map(el => <div key={el.id}>{el?.body}</div>)
&& items.map(el => <div key={el.id}>{el?.title}</div>)
&& items.map(el => <div key={el.id}>{el?.name}</div>)}
</div>
)
}

Answer 1

Just iterate through your items once and check the values of each item:
import React, {useState} from "react";
export let Inputs = () => {
const Base_Url = 'https://jsonplaceholder.typicode.com'
const availableResources = ['posts', 'comments', 'photos', 'albums', 'todos', 'users']
const [endPoint, setEndpoint] = useState('');
const [id, setId] = useState('');
const [items, setItems] = useState([]);
const [singleItem, setSingleItem] = useState(null);
const [error, setError] = useState('');
const onSubmit = () => {
if (!endPoint){
return setError('First Input Is Required')
}
if (!availableResources.includes(endPoint)) {
return setError('Value is not valid')
}
const idToNub = Number(id);
if (!idToNub && id !== '') return
fetchData()
setError('')
}
const fetchData = async () => {
const response = await fetch(`${Base_Url}/${endPoint.trim()}/${id.trim()}`)
const data = await response.json()
if (id) {
setSingleItem(data)
setItems([])
return
}
setSingleItem(null)
setItems(data)
}
return (
<div>
<input
type="text"
placeholder="Type posts, comments, todos"
value={endPoint}
onChange={({target : {value}}) => setEndpoint(value)}
/>
<input
type="text"
placeholder="Type id number"
value={id}
onChange={({target : {value}}) => setId(value)}
/>
<button onClick={onSubmit}>Fetch Data</button>
<pre>{singleItem && JSON.stringify(singleItem, null)}</pre>
<h1>{error}</h1>
{items.map(el => {
const fields = Object.keys(el);
let renderItems = fields.map(field => <div key={el[field]}>{el[field]}</div>)
return renderItems;
})
}
</div>
)
}