To show/hide a Form.control based on check/uncheck from Form.check in react bootstrap

user_3205271 0
Viewed 5672

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>
      )
    }

}

react-bootstrap reactjs javascript
2 Answers

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

user_117028250

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;
user_91808730
Related