Cannot be used as a JSX component. Its return type 'Promise<Element>' is not a valid JSX element - promise

Question

I have an React Component Editor. I am trying to initialize the state using an async function. But I am unable to .
How we can do that in React.
const Editor = () => {
const { id } = useParams();
const [schemas, updateSchemas] = useAtom(bfsAtom);
const schema = id && _.get(schemas, id, {});
type InitialStateType = {
properties: KeyedProperty[];
validations: ValidationDataProperty[];
};
const getInitialState = async (): Promise<InitialStateType> => {
return {
properties: createPropertiesFromSchema(schema),
validations: initializeConditions(schema),
};
};
const initialState = await getInitialState();
const mainReducer = (
{ properties, validations }: InitialStateType,
action: Action
) => ({
properties: propertyReducer(properties, action),
validations: validationReducer(validations, action),
});
const [state, dispatch] = useReducer(mainReducer, initialState);
return (
<PropertyContext.Provider value={{ state, dispatch }}>
<SchemaEditor schema={schema} />
</PropertyContext.Provider>
);
};

Answer 1

TL;DR moving the async from top level to inside the component did the trick
Is not directly linked with your question but one thing that I was doing wrong is the following:
I had a component that looked like:
const MyComponent = async () => {
...
const apiResponse = await apiFunction();
return <div>
{apiResponse.success && (
<p>It was a success!</p>
)}
</div>
}
BUT you shouldn't use async in your components at top level. So to fix it I did this:
const MyComponent = () => {
...
const apiResponse = async () => {
return await apiFunction();
}
return <div>
{apiResponse().success && (
<p>It was a success!</p>
)}
</div>
}