Recipe Box Help: React Bootstrap

I am using React Bootstrap on this project, but some of the components don’t work for me. I got Panel, Accordian, and Modal to work, but FormGroup, ControlLabel, and FormControl don’t. (They actually make the Modal stop working when I add them to it.) Any ideas why this is happening and how to fix?


Here is my code:

let Panel = ReactBootstrap.Panel;
let Accordion = ReactBootstrap.Accordion;
let Modal = ReactBootstrap.Modal;
let FormGroup = ReactBootstrap.FormGroup;
let ControlLabel = ReactBootstrap.ControlLabel;
let FormControl = ReactBootstrap.FormControl;

        {, index) =>(
          <Panel className = "category" header={shape.shape} eventKey = {index} key = {index}>
               <li key={item}>{item}</li>
            <input placeholder="Enter new attribute" value = {this.state.newAttribute} onChange={this.onAttributeChange}/>
            <button onClick = {() => this.addAttribute(newAttribute, index)}>Add Attribute</button>
            <br />
            <button onClick = {() => this.delete(index)}>DELETE shape</button>
      <Modal show={this.state.showAdd} onHide={this.close}>
      <Modal.Header closeButton>
        <Modal.Title>Add Shape</Modal.Title>
            <ControlLabel>Shape Name</ControlLabel>
              value = {newShape.shape}
              placeholder="Enter Shape Name"
              onChange = {(event) => this.updateNewShape(, newShape.attributes)}

I think it’s because you are using an older version of react-bootstrap. This should fix your issue:

  1. Go to Settings in your Pen
  2. In the “External Research Search…” textbox, look for react-bootstrap
  3. Add react-bootstrap.js from the drop-down list

That should fix your problem already! You seem to also be missing a <form> element that wraps the control.

I hope that helps!

Of course! Thank you!