Check prop values before loading component

Question

I have a simple React component that injects an instance of the Rich Text Editor, TinyMCE into any page.

It is working, but sometimes a bad prop value gets through and causes errors.

I was wondering, if there is a way to check if the values of planetId or planetDescriptor are either empty or null before anything else on the page loads.

I tried wrapping all the code in this:

if(props)
{
    const App = (props) => { ... }
}

But that always throws this error:

ReferenceError: props is not defined

Is there a way to check for certain values in props before I finish loading the component?

thanks!

Here is the app:

const App = (props) => {
    const [planetDescriptor, setPlanetDescriptorState] = useState(props.planetDescriptor || "Planet Descriptor...");
    const [planetId, setPlanetIdState] = useState(props.planetId);
    const [planet, setPlanetState] = useState(props.planet);
    const [dataEditor, setDataEditor] = useState();

    const handleEditorChange = (data, editor) => {
        setDataEditor(data);
    }

    const updatePlanetDescriptor = (data) => {
        const request = axios.put(`/Planet/${planetId}/planetDescriptor`);
    }

    return (
        <Editor
            id={planetId.toString()}
            initialValue={planetDescriptor}
            init={{
                selector: ".planetDescriptor",
                menubar: 'edit table help'
            }}
            value={dataEditor}
            onEditorChange={handleEditorChange}
        />
    )
}

export default App;

Answer 1

You had the right idea in the conditional. Just need to put it inside the component rather than wrapping the whole thing. What you can try is something similar to what the react docs for conditional rendering has for a sample. What this does is it check if the props = null / undefined and then returns or renders the error state. Else it returns the Editor.

    if (!props) {
      return <h1>error state</h1>
    }
    return <Editor></Editor>