ReactJS: Rendering multiple components conditionally

Question

So, I have a few components passing down a function to update the main component's state and then I want to re-render on the grandchild's component...

class GrandParentComponent extends Component {
  state = {
    formData: {
      rooms: [],
    },
  }

// has a function: handleRoom
handleRoom = room => {
  let roomsArray = this.state.formData.rooms.slice();
  let newRooms = [...roomsArray, room]; // add room to array
  this.setState({
    formData: update(this.state.formData, { rooms: { $set: newRooms }}),
  }); // update and $set comes from 'immutability-helper'
}
</GrandParentComponent>

Passes down to ParentComponent
<ParentComponent handleRoom={this.handleRoom} formData={this.state.formData} />

Passes down to ChildComponent
<ChildComponent handleRoom={this.props.handleRoom}  />

In thie child component, I want to update the state of the grandparent component.

handleSaveRoom = room => { this.props.handleRoom(room); }
// great this successfully updates the grandparent...

After the grandparent component is updated, I want to re-render the ParentComponent using the new data:

<ParentComponent handleRoom={this.handleRoom} formData={this.state.formData} >

handleCreateAddRoomForm = (room, i = 0) => {
  return (
    <Panel header={room.title} key={i}>
      <AddRoomForm room={room} />
    </Panel>
   )
}

render() {
  const { formData } = this.props;
  const renderRooms = formData.rooms.length 
    ? formData.rooms.map((room, i) => {
      this.handleCreateAddRoomForm(room, i);
    })
    : this.handleCreateAddRoomForm({title: 'New Room'});

  return (
    <div>
      {renderRooms}
    </div>
  )
 }
</ParentComponent>

So, I get back the room found... not sure about the (13 Not Found)... but the <Panel /> does not show in the <ParentComponent />

Ideally, when the data is updated on the <Grandparent /> from the <Child /> the <Parent /> should create a <Panel /> component to show the change...

Thoughts?

@ChristianM Okay, I have added formData to show how it is passed — Daltron
– Daltron, Commented Mar 16, 2018 at 19:22

Fleezey · Accepted Answer · 2018-03-16 19:34:58Z

1

Your map function must be returning undefined. Your formData.rooms.map returns nothing.

const renderRooms = formData.rooms.length 
  ? formData.rooms.map((room, i) => {
    this.handleCreateAddRoomForm(room, i);
  })
  : this.handleCreateAddRoomForm({title: 'New Room'});

try it like this instead (notice how I removed the { } in the map). If you want to keep the { } make sure you return the value.

const renderRooms = formData.rooms.length 
  ? formData.rooms.map((room, i) => this.handleCreateAddRoomForm(room, i))
  : this.handleCreateAddRoomForm({title: 'New Room'});

or

const renderRooms = formData.rooms.length 
  ? formData.rooms.map((room, i) => {
    return this.handleCreateAddRoomForm(room, i);
  })
  : this.handleCreateAddRoomForm({title: 'New Room'});

answered Mar 16, 2018 at 19:34

Fleezey

1667 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Fleezey Over a year ago

Yeah without the return it thinks you return undefined

Daltron Over a year ago

So, I want to dynamically create another <Panel> component, which would mean I need to add a new object into the formData.rooms array?

Fleezey Over a year ago

Exactly. As long as you pass down that array to your child component, it should update it automatically

Collectives™ on Stack Overflow

ReactJS: Rendering multiple components conditionally

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related