score:2

Accepted answer
class HomePage extends Component {
    constructor(props) {
    super(props);

    this.state = {
        station: '',
        bug: '',
        desc: '',
        bugs: []
    }
}

componentDidMount() {
    firebase.database().ref('bugs/').on ('value', (snapshot) => {
        const currentBugs = snapshot.val()
        if (currentBugs != null) {
            this.setState({
                bugs: currentBugs
            })
        }
    })
}

stationBug=(event)=>{
    this.setState({
        station: event.target.value
    });
}

issueBug=(event)=>{
    this.setState({
        bug: event.target.value
    });
}

descBug=(event)=>{
    this.setState({
        desc: event.target.value
    });
}

submitBug=(event)=>{
    const nextBug = {
        id: this.state.bugs.length,
        station: this.state.title,
        bug: this.state.bug,
        desc: this.state.desc
    }
    firebase.database().ref('bugs/'+nextBug.id).set(nextBug)
}

  render() {

    return (
      <div className="App">
        {this.state.bugs.map(bug => <li key={bug.id}>{bug.station}</li>)}
        <input onChange={this.stationBug} type="text" placeholder="Station #" />
        <br />
        <textarea onChange={this.issueBug} type="text" placeholder="Bug/Issue" />
        <br />
        <textarea onChange={this.descBug} type="text" placeholder="Bug Description" />
        <br />
        <Button onClick={this.submitBug} type="button"> Enter Bug </Button>
      </div>
    );
  }
}

export default withAuthorization()(HomePage);

score:1

submitBug(event) {
    const nextBug = {
        id: this.state.bugs.length,
        station: this.state.title,
        bug: this.state.bug,
        desc: this.state.desc
    }
    firebase.database().ref('bugs/'+nextBug.id).set(nextBug)
}

Related Query

More Query from same tag