How do I add destructuring here in the case

Question

I learn React and JavaScript. I stumbled on this Eslint suggest I do destructuring like the image warning suggest but where do I add that. I try like const { errorComponent }= props; but that did not work inside a const

The code:

import '../../styles/error.scss';

const Error = props => (
    <div className="error-message">
        {props.errorComponent ? <props.errorComponent {...props} /> : <p className="alert">Unable to preview file</p>}
    </div>
);

export default Error;

Answer 1

Additionaly to my comment, your components might look something like this:

const Error = ({ errorComponent: Component, ...props }) => (
  <div className="error-message">
    {Component ? (
      <Component {...props} />
    ) : (
      <p className="alert">Unable to preview file</p>
    )}
  </div>
);

A better option is to use children prop instead.

const Error = ({ children }) => (
  <div className="error-message">
    {children || <p className="alert">Unable to preview file</p>}
  </div>
);