React Component not displaying [duplicate]

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
– David, Commented Dec 28, 2017 at 23:31
@David if you want to pass in props, your declaration for movieList would look something like const movieList = props => {....} — Yifei Xu
– Yifei Xu, Commented Dec 28, 2017 at 23:42
@David not necessarily. Components that look like const x = props => {...} are known as stateless components, and can also be used in the form of <x /> — Yifei Xu
– Yifei Xu, Commented Dec 28, 2017 at 23:47

Jason Warta · Accepted Answer · 2017-12-29 01:59:49Z

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, 2017 at 1:59

Jason Warta

4505 silver badges8 bronze badges

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

1 Comment

David Over a year ago

This did it. Thank you!

Collectives™ on Stack Overflow

React Component not displaying [duplicate]

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related