Я новичок в ReactJS. До сих пор я использую JQuery для установки любой анимации или какой-либо функции, которая мне нужна. Но сейчас я пытаюсь использовать ReactJS и минимизировать с помощью JQuery.

Мой случай это:
Я пытаюсь построитьсобственный аккордеон, с JQuery я могу это сделать, но с ReactJS я не понимаю, как это сделать.

<div class="accor">
   <div class="head">Head 1</div>
   <div class="body hide">Body 1</div>
</div>
<div class="accor">
   <div class="head">Head 1</div>
   <div class="body hide">Body 1</div>
</div>
<div class="accor">
   <div class="head">Head 1</div>
   <div class="body hide">Body 1</div>
</div>

используя JQuery:

$('.accor > .head').on('click', function(){
   $('.accor > .body').slideUp();
   $(this).next().slideDown();
});

Мой вопрос:
1. Как это сделать в ReactJS?

Спасибо, прежде чем