React обрабатывает синтаксис "{variable}" как объект

Question

Это мой код

import React from 'react';
import styles from './Backdrop.css';

const Backdrop = props => {
  const bd = props.show ? <div className={styles.Backdrop} onClick={props.clicked} /> : null
  return (
    {bd}
  );
};

export default Backdrop;

И я получаю это сообщение об ошибке

Objects are not valid as a React child (found: object with keys {bd}). If you meant to render a collection of children, use an array instead

Я не понимаю, что я делаю неправильно, тем более, что раньше я использовал этот синтаксис и все было в порядке. Я знаю, что мне не нужно использовать переменную для отображения этого, но окончательная версия этого компонента требует использования этой части кода в качестве переменной. Что я могу сделать, чтобы сделать эту работу?

Answer 1

Вашему заявлению на возврат не нужны фигурные скобки. Они нужны только внутри выражений jsx. Возврат после конца выражения jsx.

Answer 2

Вам нужны только {} фигурные скобки в элементе JSX. В операторе возврата просто верните переменную.

const Backdrop = props => {
  const bd = props.show ? <div className={styles.Backdrop} onClick={props.clicked} /> : null
  return (
    bd
  );
};

по сравнению с:

const Backdrop = props => {
  const bd = props.show ? <div className={styles.Backdrop} onClick={props.clicked} /> : null
  return (
    // In a <h1> tag, you use curly braces
    <h1>{bd}</h1>
  );
};