How do you bind a dynamic API response to a React UI? - reactjs

Question

I am consuming an API which has a few 'required' fields and fields which are not required. As such, depending on the result of the response, the shape can change dramatically with fields being excluded in the response.
An example Schema:
{
name: string; // required
surname: string; // required
addresses: []
telephoneNumbers: []
gender: string; // required
age: number;
}
So a request could return multiple formats:
Example: 'api.com/users/123'
{
name: 'John',
surname: 'Doe',
addresses: [ ....]
telephoneNumbers: [....]
gender: 'male',
age: 20
}
Example: 'api.com/users/456
{
name: 'Betty',
surname: 'Boo',
gender: 'female',
}
When I bind the response to my UI (react) is there a way to check each field exists?
Do I have to check if each field exists and has a value in the response before rendering it? As in:
const DisplayResults = () => {
const { data } = await api.getUser('123');
return (
<div>
<div>{data.name}</div>
<div>{data.surname}</div>
{data.age && <div>{data.age}</div>}
{data.gender && <div>{data.age}</div>}
{data.addresses && <div>{data.addresses.map((address) => ...)}</div>}
</div>
)
}
Bear in mind any nested objects may have 'required' and non required fields which means I either need to sanitize the response to match the response to how I want or do a check on each field to make sure it's not undefined.
If I bind to a grid component, it'll throw errors for undefined fields which may or may not be there.
Any ideas?

Answer 1

Seems like depending on the type of data you need a different way to display the data.
You could create a piece of state which is an array of Objects that hold info on how to handle each key.
import React from 'react'
import ReactDOM from 'react-dom'
class User extends React.Component {
constructor(props) {
super(props);
this.state = {
user_rows: [
{
key_name: "name",
data_function: (data = "") => data,
display:(data) => data.length > 0 ? true : false
},
{
key_name: "addresses",
data_function:(data = []) => data.map((a,idx) => {
return( <div>{a}</div>)
}),
display:(data) => data.length > 0 ? true : false
},
{
key_name: "gender",
data_function:(data = "") => data,
display:(data) => data.length > 0 ? true : false
}
]
}
}
render() {
let data = {
name: 'John',
surname: 'Doe',
addresses: ["adress 1"],
telephoneNumbers: ["000 000 000"],
gender: '',
age: 20
}
return (
<div>
{this.state.user_rows.map((ur,idx) => (
ur.display && <div key={idx}>{ur.data_function(data[ur.key_name])}</div>
))}
</div>
);
}
}
ReactDOM.render(
<User/>,
document.getElementById('container')
);