Rendering A List In React

I am creating a blog using React and Firebase. I have a component called Blogger that creates blog posts and then saves them in firebase. Now, I am trying to render a list of all o

Solution 1:

The error in your screenshot is quite clear. It's a syntax error.

The following is not legal JavaScript:

functionfoo () {
  return ( if (true) return'hello )
}

Nesting return statements like this will crash.

The pattern you are looking for is more like this:

functionfoo () {
  if (cond) {
    return<List />
  }

  return<SomethingElse />
}

Additionally the way you are writing render is incorrect. Class functions should just be:

render() {
  // return stuff
}

Finally your render method should something like this:

render() {
  if (this.props.title && Object.keys(this.props.title).length === 0) {
    return<h4>enter a blog entry to get started</h4>
  }

  returnObject.keys(this.props.title).map(key =><li>{this.props.title[key]}</li>
  )
}

Solution 2:

Here is the solution

Blogger.jsx

importAltContainerfrom'alt-container';
importReactfrom'react';
import { Link } from'react-router';
importListfrom'./List.jsx'importFirebasefrom'firebase'const rootURL = 'https://incandescent-fire-6143.firebaseio.com/';


exportdefaultclassBloggerextendsReact.Component {
  constructor(props) {
    super(props);


    this.firebaseRef = newFirebase(rootURL + 'items/');




    this.state = {
      title: '',
      text: ''
  };

    this.firebaseRef.on('value', function(snapshot) {
      console.log(snapshot.val());
  });

  }



  handleInputChange = () => {

    this.setState({
      title: this.refs.title.value,
      text: this.refs.text.value});
  }


  handleClick = () => {

    this.firebaseRef.push({
      title: this.state.title,
      text: this.state.text,
      done: false
    })



    this.setState({title: '',
                   text: ''
                  });
  }


  render() {
    return (
      <div><divclassName="row panel panel-default"><divclassName="col-md-8 col-md-offset-2"><h2>
                Create a New Blog Post
            </h2></div></div><h2>Blog Title</h2><divclassName="input-group"><inputref="title"value={this.state.title}onChange = {this.handleInputChange}type="text"className="form-control"/><spanclassName="input-group-btn"></span></div><h2>Blog Entry</h2><divclassName="input-group"><textarearef="text"value={this.state.text}onChange = {this.handleInputChange}type="text"className="form-control"/></div><divclassName="blog-submit input-group-btn"><buttononClick={this.handleClick}className="btn btn-default"type="button">
            Publish Blog Post
          </button></div><Listtitle={this.state.title} /></div>


    );
  }

}

List.jsx

importAltContainerfrom'alt-container';
importReactfrom'react';
import { Link } from'react-router';
importBloggerfrom'./Blogger'exportdefaultclassListextendsReact.Component {
  constructor(props) {
    super(props);

    // console.log(this.props.blog);
  }


  render() {
    console.log(this.props.blog)
  //   Object.keys(this.props.title[key]).map(key) =>//   <li>{this.props.title}</li>// )return (
      <div><li>{this.props.blog.title}</li></div>
    )
  }
}