React - console warnings & errors

Question

This is my first React attempt ever and I am doing a tutorial where I watch a video and type the code to follow along. It worked for a while but now I have bumped into issue.

The following code works in the video but fails in my browser Google Chrome for Ubuntu, Version 72.0.3626.119 (Official Build) (64-bit).

let channels = [ {name:"Hardware Support"}, {name:"Software Support"} ]; let channelComponents = channels.map(function(channel){ return <Channel name="channel.name"/> }); class Channel extends React.Component{ onClick(){ console.log("I was clicked:" + this.props.name); } render(){ return ( <li onClick={this.onClick.bind(this)}>{this.props.name}</li> ) } } class ChannelList extends React.Component{ render(){ return ( <ul> {this.props.channels.map(channels => { return( <Channel name={channel.name}/> ) })} </ul> ) } } ReactDOM.render(<ChannelList channels="{channels}"/>,document.getElementById("app"));

The first issue is on line 8 in the image.

react.js:18745 Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). warning @ react.js:18745 createElement @ react.js:9462 (anonymous) @ app.js:8

The second issue is on line 29 in the image.

app.js:29 Uncaught TypeError: this.props.channels.map is not a function

Can anyone point out to me what might be wrong? (The author of the tutorial has not responded)

After trying the following:

let channelComponents = channels.map(function(channel){ return <Channel name={channel.name}/> });

And also:

ReactDOM.render(<ChannelList channels={channels} />,document.getElementById("app"));

I get the same error for the channelComponents on line 8 but the map() error is now:

Uncaught ReferenceError: channel is not defined ``

Matt Pengelly · Accepted Answer · 2019-03-01 16:39:31Z

You have two problems I can see.

first within your map you seem to want to pass the channel name but your syntax is incorrect. You probably want to use curly brackets instead.

let channelComponents = channels.map(function(channel){ return <Channel name={channel.name}/> });

theres a similar problem when you pass channels to reactDOM.render. You probably want this instead.

ReactDOM.render(<ChannelList channels={channels} />,document.getElementById("app"));

(edit) after you updated the question the remaining problem is this:

class ChannelList extends React.Component{ render(){ return ( <ul> {this.props.channels.map(channel => { return( <Channel name={channel.name}/> ) })} </ul> ) }

I removed the 's' from the callback argument "channels".

bah beat me to it. i haven't run this but that's what I saw also.
Oh. I see you updated the question. I updated my answer. It should work now.

Collectives™ on Stack Overflow

React - console warnings & errors

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related