Best way to display data form an api call - reactjs

Question

I was wondering what is the best way to display data from a rest api.
Actually what I do:
Call fetch function from componentDidMount();
setState to store my response
Check with ternary when render() if the value is set or not
it look like this :
(getcall() is a fetch function) :
async componentDidMount() {
const response= await getCall(
`event?ref=23876186`, // this is just to illustrate
);
this.setState({ payload: response})
}
Then in render() I do some :
{this.state.payload ? (
<h1>{this.state.payload.event.name}</h1>) : ( <h1></h1>)}
I though about calling my fetch function from the constructor, but it's weird to call an async function in a constructor, you loose the aync purpose.
I imagine some case like for an input :
<Input
type="text"
name="name"
id="name"
**value={this.state.event.name}**
placeholder="Name..."
onChange={this.handleName}
required
/>
If I want to set a value for it, like this.state.event.name, if I have 10 fields, I will have 10*2 times this kind of code because for each one I wrote a ternary.
So what is the best way to display data from an api call ?
Thanks for your answers

Answer 1

Instead of adding a lot of ternaries where you check if payload is set, you can return null early from the render method if it is not set yet.
Example
class App extends React.Component {
state = {
payload: null
};
async componentDidMount() {
const response = await getCall("/event?ref=23876186");
this.setState({ payload: response });
}
render() {
const { payload } = this.state;
if (payload === null) {
return null;
}
return <div>{/* ... */}</div>;
}
}