React почему не работает условный рендеринг?

Question

Есть функциональный компонент, хочу в зависимости от условия вывести или App или Win компонент. но почему то не работает ,что делаю не так?

import App from './App';
import Win from './Win';
import { useEffect, useState } from "react";

function Main(){
   const [count, setCount] = useState(true);
 
   let button;

   if (count) {
      button = <Win />;
    } else {
      button = <App />;
    } 
return (
   {button}
)

}
export default Main;

Answer 1

Надо просто без фигурных скобок:

const {useState} = React;

const Win = () => <button> Win </button>;
const App = () => <button> App </button>;

function Main() {
  const [count, setCount] = useState(true);

  const button = count ? <Win /> : <App />;

  return button;
}

ReactDOM.render(<Main />, document.getElementById('root'));

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.production.min.js"></script>

БЛОГ НА HUSL

React почему не работает условный рендеринг?

Ответы (1 шт):