React Component not displaying

Question

Foo is being displayed but not Bar. I am following a tutorial but using a different api but everything is the same, so I can't figure out why this isn't working.

import React, {Component} from 'react';
import ReactDOM from 'react-dom';

import movieDB from './themoviedb-javascript-library/themoviedb';

const movieList = () => {
return (
  <p>
  Bar
  </p>
);
}

class App extends Component {
constructor(props) {
super(props);
this.state = { movies: [] };

movieDB.search.getMovie({ "query":"Fight Club" }, (movies) => {
  // console.log(this)
  this.setState({movies: movies});
}, (err) => {
  console.log(err);
})
}

render() {
return (
  <div>
    Foo
    <movieList />
  </div>
)
}

}


ReactDOM.render(<App />, document.querySelector('.container'));

@JosanIracheta I tried that with the same thinking but that also doesn't work. — David, Dec 28 '17 at 23:31
@YifeiXu That worked, I'm confused why isn't working, since I thought that was how you passed in components. Also what if I want to pass in props? — David, Dec 28 '17 at 23:42
@David if you want to pass in props, your declaration for `movieList` would look something like `const movieList = props => {....}` — Yifei Xu, Dec 28 '17 at 23:42
@YifeiXu Is only used for passing in class based components then? — David, Dec 28 '17 at 23:46
@David not necessarily. Components that look like `const x = props => {...}` are known as stateless components, and can also be used in the form of `` — Yifei Xu, Dec 28 '17 at 23:47
`movieList` component should be capitalized. Use `const MovieList = () => ...` instead. — Sam R., Dec 29 '17 at 00:39

score 2 · Accepted Answer · answered Dec 29 '17 at 01:59

2

React components have to be capitalized. MovieList should work. React treats lowercase tags as html tags and doesn't try to process them.

answered Dec 29 '17 at 01:59

Jason Warta

430
5
8

This did it. Thank you! – David Dec 29 '17 at 13:00

React Component not displaying

1 Answers1