Recipe Box Help: React Bootstrap

Curriculum Help
1

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?

Thanks!

Here is my code: https://codepen.io/jennnico/pen/deKMMJ?editors=0010

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

return(
    <div>
      <Accordion>
        {shapes.map((shape, index) =>(
          <Panel className = "category" header={shape.shape} eventKey = {index} key = {index}>
            <ul> 
             {shape.attributes.map((item)=>(
               <li key={item}>{item}</li>
             ))}
            </ul> 
            <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>
          </Panel>
        ))}
      </Accordion>
      
      <Modal show={this.state.showAdd} onHide={this.close}>
      <Modal.Header closeButton>
        <Modal.Title>Add Shape</Modal.Title>
        <Modal.Body>
          
          <FormGroup
            controlID="formgroup">
            <ControlLabel>Shape Name</ControlLabel>
            <FormControl 
              type="text" 
              value = {newShape.shape}
              placeholder="Enter Shape Name"
              onChange = {(event) => this.updateNewShape(event.target.value, newShape.attributes)}
              ></FormControl>
            
          </FormGroup>
        </Modal.Body>
        </Modal.Header>
      </Modal>
2

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!

3

Of course! Thank you!