CODEWITHSUNDEEP
reactjsfirebaselodash
rimraf
rimraf

Reputation: 4126

React + Firebase - Deleting firebase object inside mapped components

I'm trying to pass the key of my project object through to my mapped components in order to delete them.

UPDATE: using the _.forEach(project, (proj, key) => <Project key={key} {... more props here}/>) Throws an error about objects not being valid react children. I'm guessing this is because the project i'm forEaching over needs to be turned into an array? I keep trying to format in componentWillMount() but when i try to run forEach with setState and push to a new array i keep getting duplicates 

componentDidMount() {
    projectRef.on('value', snap => {
      this.setState({projects: snap.val()})
      // somehow i need to create a new array of objects that include the key.
    })
  }

UPDATE: i removed the codepen example. I like code sandbox better. Much better. =)

And here's the code sandbox (If you get an error about the [DEFAULT] app already being defined just refresh the output browser and it will work. I don't know why it's doing that... oh well. I added my attempt with forEach on the code sandbox example. Hopefully someone can let me know what i'm doing wrong.

Upvotes: 2

Views: 735

Answers (1)

Rodrigo
Rodrigo

Reputation: 1688

Yep, map returns an array of the values of the object, in this case an object you can then access via the props in the <Display /> component, but not the key of each element of the object.

Perhaps you could use lodash's forEach in order to loop and have access to both the key and the value of each element in your data collection. Like that you can pass the key (that will be the target for the remove method) as a specific prop and the value as the item prop in the component. 

export default class extends React.Component {
  constructor() {
    super()
    this.state = {
      items: null
    }
  }
  render() {
    return() {
      <div>
        {_.forEach(this.state.items, (item, key) => 
           <Display key={key} itemKey={key} item={item}/>
        )}
      </div>
    }
  }
}

// then the display component
removeItem() {
   firebase.database().ref({this.props.itemKey}).remove();
}
render() {
  return (
    <div>{this.props.item.name} <button onClick={this.removeItem}>X</button>
  )
}

Here's a simple live example of how forEach works:

https://jsbin.com/xolejoj/edit?js,console

Edit 08-12-2017

The problem with your code is that you're missing the fact that map is returning the key and the value of each element of the object. In this case your object has a key string and a value that is the object. Then on your JSX you're trying to pass the key as it were a part of the object (value) but is not, therefore you're getting an undefined value in the component's props.

Change your code to this: 

<div>
  {_.map(projects, (proj, key) => <Project 
      key={key} 
      title={proj.title}
      subtitle={proj.subtitle}
      desc={proj.desc}
      itemKey={key} // just the key of the object
    />
  )}
</div>

The thing is that the key of each object is the identifier in firebase and the value is the object with the data you need, but that object doesn't have a key property, therefore it was evaluated to null.

Upvotes: 2

Related Questions