Error: Component ReactCardFlip requires 2 children to function. В чем проблема?

Question

[Rebuslol]

В чем может быть проблема?

import React, { useState } from 'react'
import '../index.css'
import logo from '../logo.png'
import red from '../red.png'
import ReactCardFlip from 'react-card-flip'

const Main = () => {
  const [isFlipped, setIsFlipped] = useState(false)
  const handleClick = () => {
    setIsFlipped(!isFlipped)
  }
    return (
      <div>
        <section class="memory-game">
          <ReactCardFlip isFlipped={isFlipped} flipDirection='vertical'>
          <div class="memory-card" >
            <div><img class="front-face" onClick={handleClick} src={red} alt="React" /></div>
            <div><img class="back-face" onClick={handleClick} src={logo} alt="Memory Card" /></div>
          </div>
          </ReactCardFlip>
        </section>
      </div>
    )
  }


export default Main


и на всякий случай файл index.js


import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import Main from './components/Main';


ReactDOM.render(

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

serviceWorker.unregister();

Comments

[paoluccio]

Попробуйте опустить закрывающий </ReactCardFlip> до </section>.

[Rebuslol]

paoluccio, не помогло

[paoluccio]

Rebuslol, ReactCardFlip'у нужны два дочерних элемента

<ReactCardFlip>
  <div>1</div>
  <div>2</div>
</ReactCardFlip>

[Rebuslol]

paoluccio, работает,но эти 2 дива упакованы в другой, а он мне нужен,как решить эту проблему? спасибо. Если оставить 2 дива,как вы говорите,то все ок

[Rebuslol]

paoluccio, разобрался с дивом,спасибо) но переворачивание не верное

[paoluccio]

Rebuslol, попробуйте такую структуру:

<ReactCardFlip>
  <div>
    // Разметка передней стороны
  </div>
  <div>
    // Разметка задней стороны
  </div>
</ReactCardFlip>