How to make a dropdown block on click (React Redux)?

Question

flux

class CompanyPage extends React.Component {
    static propTypes = {
        dispatch: PropTypes.func.isRequired
    };

constructor(props) {
        super(props);

        this.state = {
            info: {
                display: 'none !important'
            }
        };
    }

onBtnClickHandler(e) {
    e.preventDefault();

        var block = document.querySelector('.selected-company-info__text');

        block.setState({
            info: { display: 'block !important' }
        });

    }

render () {
        const {
            props: {   },
            state: { info }
            } = this;

const style = {
            info: {
                block: info.block
            }
        };

return(
<a
                        href="javascript://"
                        className="button button--white button--center"
                        onClick={this.onBtnClickHandler}>
                        УЗНАТЬ БОЛЬШЕ О ...
                    </a>
                </div>
                <div style={style.block} className="selected-company-info__text visible-tablet disable-mobile">
                    some text
                </div>
);

}

}

export default CompanyPage;

I give an example of a component, I am just starting to learn redux, so there may be various kinds of errors. I ask you to point them out and give an example of another implementation of this moment.
Thanks in advance!

Answer 1

Oh lord.

componentWillMount() {
this.setState({buttonToggle: true})
}

handleClick() {
this.setState({buttonToggle: !this.state.buttonToggle})
}

render() {
.....
<div style={{display: (this.state.buttonToggle ? 'block' : 'none')}}></div>
....
}

Ну и собственно зачем document.querySelector там где это не надо и вложенность стилей странная у вас, запутаетесь же