How to get a component inside the Try catch block. ReactJS-CodePudding

I want to get the component from another file to the try-catch block. So for the example i created the component in one file

const Example = () => {
return (
<div>
<h2>this is a test</h2>
</div>
);
}

export default Example.

And in the App.js file i have a try-catch block but when i import new component to the catch it is not shown. But if a call the same component in the return statement it is shown. so for example

import Example from "./filename"

function App() {

  function clickFail() {
      
    try {
      console.log(window.device.version)
    } catch (e) {
    < Example /> 
  }
  }
}

return (
    <div className="App">
      <button onClick={clickFail}>failed</button>
//if a call it from here it is shown.
  //    < Example />
    </div>
  );

export default App;

CodePudding user response：

The component must be part of the JSX either through a variable or through conditional rendering. Here's 2 ways you can achieve this.

With direct component reference in the state:

function App() {
  const [caughtComponent, setCaughtComponent] = useState(null);

  function clickFail() {
    try {
      console.log(window.device.version);
    } catch (e) {
      setCaughtComponent(() => <Example />);
    }
  }

  return (
    <div className="App">
      <button onClick={clickFail}>failed</button>
      {caughtComponent}
    </div>
  );
}

With a boolean that determines whether or not to render the component:

function App() {
  const [caughtError, setCaughtError] = useState(false);

  function clickFail() {
    try {
      console.log(window.device.version);
    } catch (e) {
      setCaughtError(true);
    }
  }

  return (
    <div className="App">
      <button onClick={clickFail}>failed</button>
      {caughtError && <Example />}
    </div>
  );
}

CodePudding user response：

When you create a functional component in React, only what is returned from the component will be displayed. In your example, there is actually no return statement inside of the App() component. You do trigger a clickFail call when the button is clicked, but the return from that function does not affect the app component. Also, your return statement for App is outside of the last bracket.

I am confused by your use case but regardless, if I understand correctly you are trying to display a component only when an error occurs. I think the best way to do this is with React useState() and conditional rendering. Here is how you could refactor to achieve the desired result:

const Example = () => {
  return ( 
  <div>
    <h2> this is a test </h2>
  </div>
  );
}

const App = () => {
  const [clickFailed, setClickFailed] = useState(false);

  const clickFail = () => {
    try {
      console.log(window.device.version)
    } catch () { 
      setClickFailed(true);
    }
  }

  return ( 
    <div>
      <button onClick={clickFail}>failed</button>
      {clickFailed ? <Example /> : null}
    </div>
  );

}