Пользовательские Подробнее в React.js

Question

Как вы можете видеть на этом изображении, «+ Las mor» - это кнопка «Видеть больше», которая при нажатии расширяет весь абзац, написанный выше.Мне нужен код React для того, чтобы это было функционально.Любая помощь будет оценена.Я также прилагаю код, к которому должна применяться эта функциональность.

<section id="section-2">
 <h4>Om mig</h4>
 <p className="para">
  {about} 
 </p>
</section>
<p style={{color:'#d39176'}}>
 <img src={plus1} />
 Läs mer
</p> 

Answer 1

Возможно, вам нужна кнопка, которая переключает состояние развернутого текста на клике.При нажатии на кнопку вы установите состояние, противоположное тому, что было.Вот рабочий пример, который я написал с React и Reactstrap.Я только что проверил это локально.Вот видео-демонстрация того, что вы увидите: https://screencast.com/t/in5clDiyEcUs

import React, { Component } from 'react'
import { Container, Button } from 'reactstrap'

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      expanded: false //begin with box closed
    }
  }

  //function that takes in expanded and makes it the opposite of what it currently is
  showButton = () => { 
    this.setState({ expanded: !this.state.expanded })
  }

  render() {
    const { expanded } = this.state
    return (
      <Container style={ { justifyContent: 'center', alignItems: 'center' } }>
        <div>Always visable text.</div>
        <Button onClick={ this.showButton }>Expand</Button>
        { 
          expanded && //show if expanded is true
          <div>Extended Text Here</div>
        }
      </Container>
    )
  }
}

export default App