Какой самый простой способ реализации данного кода в React?

Question

[antonstolar]

Есть JS код реализующий выползание слева сайдбара при нажатти на кнопку с помощью сss метода width:
https://jsfiddle.net/bfy1ap20/1/
Второй вариант реализации такой штуки на JS это в функции openNav задать сss метод display: block. а в closeNav display: none.
Оба варианты простые и вместе с html занимают 15 строк кода.
Увидел в интернете варианты реализации кода на React и они были вместе с jsx на 30+ строк кода. Что в 2 раза больше чем на JS( А я хочу вариант попроще....Ведь какой смысл React еcли я код буду писать в 2 раза дольше чем на JS...
Мне кажется что это можно реализовать проще:
1) задать в состояние начальное значение
2) создать метод this.setState - при нажатии кнопки выползание слева сайдбара
3)как-то сделать так чтобы при нажатти на крестик в верхнем углу сайдбара- сайдбар снова скрылся (пока не знаю как)
Что посоветуете?

Answer 1

[hzzzzl]

Мне кажется что это можно реализовать проще:
1) задать в состояние начальное значение
2) создать метод this.setState - при нажатии кнопки выползание слева сайдбара
3) как-то сделать так чтобы при нажатти на крестик в верхнем углу сайдбара- сайдбар снова скрылся (пока не знаю как)

в общем-то всё так и есть, да