I am pretty new to react and bootstrap. I want to know - How can i control the visibility of a Form.control when Form.check is checked or unchecked.

I want to display the Form.Control when a checkbox is checked and then hide it when the checkbox is unchecked. I tried to control the visibility by setting the state but so far I have been unsuccessful.

This is what i tried:

import React from 'react';
import { Row, Form, Col, Button, Container } from 'react-bootstrap';

class MyCustomClass extends React.Component {
  constructor(props) {
    super(props);

    this.initialState = {
      Check: false,
      DisplayUrl: ''
    }

    this.handleChange = this.handleChange.bind(this);

    handleChange(event)
    {
      const name = event.target.name;
      const value = event.target.type === "checkbox" ? event.target.checked : event.target.value;

      this.setState(
        {
          [name]: value
        })}

    render()
    {    
      let controlvisibility;

      if (this.state.Check) {
        controlvisibility = "visible";
      }
      else {
        controlvisibility = "hidden"; //I am not sure, if this can be used.
      }

      return (
        <div>
          <br />             
          <Form>
            <Form.Group as={Row}>
              <Container>
                <Row>
                  <Form.Check inline
                    type="Checkbox"
                    label="See the Url"
                    name="Check"
                    id="cbDisplayUrl"
                    checked={this.state.Check}
                    onChange={this.handleChange}
                  />
                  <Form.Control inline
                    type="text"
                    name="DisplayUrl"
                    onChange={this.handleChange}
                    value={this.state.DisplayUrl}
                    placeholder="The Navigation Url" />
                </Row>
              </Container>
            </Form.Group>
          </Form>
        </div>
      )
    } 

}

I am pretty new to react and bootstrap. I want to know - How can i control the visibility of a Form.control when Form.check is checked or unchecked.

I want to display the Form.Control when a checkbox is checked and then hide it when the checkbox is unchecked. I tried to control the visibility by setting the state but so far I have been unsuccessful.

This is what i tried:

import React from 'react';
import { Row, Form, Col, Button, Container } from 'react-bootstrap';

class MyCustomClass extends React.Component {
  constructor(props) {
    super(props);

    this.initialState = {
      Check: false,
      DisplayUrl: ''
    }

    this.handleChange = this.handleChange.bind(this);

    handleChange(event)
    {
      const name = event.target.name;
      const value = event.target.type === "checkbox" ? event.target.checked : event.target.value;

      this.setState(
        {
          [name]: value
        })}

    render()
    {    
      let controlvisibility;

      if (this.state.Check) {
        controlvisibility = "visible";
      }
      else {
        controlvisibility = "hidden"; //I am not sure, if this can be used.
      }

      return (
        <div>
          <br />             
          <Form>
            <Form.Group as={Row}>
              <Container>
                <Row>
                  <Form.Check inline
                    type="Checkbox"
                    label="See the Url"
                    name="Check"
                    id="cbDisplayUrl"
                    checked={this.state.Check}
                    onChange={this.handleChange}
                  />
                  <Form.Control inline
                    type="text"
                    name="DisplayUrl"
                    onChange={this.handleChange}
                    value={this.state.DisplayUrl}
                    placeholder="The Navigation Url" />
                </Row>
              </Container>
            </Form.Group>
          </Form>
        </div>
      )
    } 

}

• javascript
• reactjs
• react-bootstrap

2 Answers 2

You are already using this.state.Check to control the value of the checkbox. So you can hide/show to Form.Control like this

           <Row>
              <Form.Check inline
                type="Checkbox"
                label="See the Url"
                name="Check"
                id="cbDisplayUrl"
                checked={this.state.Check}
                onChange={this.handleChange}
              />
              {this.state.Check &&
                 <Form.Control inline
                    type="text"
                    name="DisplayUrl"
                    onChange={this.handleChange}
                    value={this.state.DisplayUrl}
                    placeholder="The Navigation Url" />
                  }

            </Row> 

This will create Form.Control when the value of this.state.Check is true, and remove it when this.state.Check is fale

first of all you shouldn't define render and handlers in constructor!!! and you should learn about state in react: try this:

import React from 'react';
import { Row, Form, Col, Button, Container } from 'react-bootstrap';

class MyCustomClass extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            Check: false,
            DisplayUrl: ''
        }

        this.handleChange = this.handleChange.bind(this);
    }


    handleChange(event) {
        const name = event.target.name;
        const value = event.target.type === "checkbox" ? event.target.checked : event.target.value;

        this.setState({
            [name]: value
        })
    }

    render() {
        return (
            <div>
                <br />
                <Form>
                    <Form.Group as={Row}>
                        <Container>
                            <Row>
                                <Form.Check inline
                                    type="Checkbox"
                                    label="See the Url"
                                    name="Check"
                                    id="cbDisplayUrl"
                                    checked={this.state.Check}
                                    onChange={this.handleChange}
                                />
                                {this.state.Check && <Form.Control inline
                                    type="text"
                                    name="DisplayUrl"
                                    onChange={this.handleChange}
                                    value={this.state.DisplayUrl}
                                    placeholder="The Navigation Url" />}
                            </Row>
                        </Container>
                    </Form.Group>
                </Form>
            </div>
        )
    }
}

export default MyCustomClass;