react - hide/show DOM - using react library

Question

I am facing issue around with React.js for the first time and cannot find a way to show or hide something on a page via click.

I am not loading any other library to the page, so I am looking for some native way using the React library. This is what I have so far. I would like to show the results div when the click event fires.

Any help appreciated

var Detail = React.createClass({
    handleClick: function (event) {
        console.log(this.prop);
    },
    render: function () {
        return (
            <div className="date-range">
                <input type="submit" value="Search" onClick={this.handleClick} />
            </div>
        );
    }
});

var DataRes = React.createClass({
    render: function () {
        return (
            <div id="data" className="search-results">
                Some Data
            </div>
        );
    }
});

React.renderComponent(<Detail /> , document.body);

Kunvar Singh Kunvar Singh · Accepted Answer · 2019-07-24T04:02:12

You can try below code :

In this example, you can try click on button and show you component and again click tyhen it will hide, basically its toggle,

Hope this is usefull for you.

var Detail = React.createClass({
    getInitialState: function() {
        return { show: false };
    },
    onClick: function() {
        this.setState({ show: !this.state.show }); // Here is the toggle
    },
    render: function() {
        return (
            <div>
                <input type="submit" value="Search" onClick={this.onClick} />
                { this.state.show ? <DataRes /> : null } // basically this line will show your datas component view when you click on view
            </div>
        );
    }
});

var DataRes = React.createClass({
    render: function() {
        return (
            <div id="data" className="search-results">
                Some Data
            </div>
        );
    }
});

ReactDOM.render( <Detail /> , document.getElementById('container'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.2/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.6.2/react-dom.min.js"></script>

<div id="container">
  <!--Your component will be render. -->
</div>

react - hide/show DOM - using react library

1 Answers