Wosley Alarico Wosley Alarico - 23 days ago 11
React JSX Question

Displaying list of values using stateless components

I am trying to display a list with the values of my array tasks.

When I inspect the page and go to console I see this:

Uncaught SyntaxError: embedded: Unexpected token (4:30)


I have no idea of what can possibly go wrong but my code looks like the one below:

<script type="text/babel">
var TaskList = React.createClass({
getInitialState: funtion(){
return {
tasks: [
{title: 'Clean dishes', id: 1},
{title: 'Take out the trash', id: 2},
{title: 'Wash the dishes', id: 3}
]
}
},
render: function(){
return(
<ul>
{this.state.tasks.map(function(task){
return <Task title={task.title} />
}

)}
</ul>
)
}
});
var Task = function(props){
return(
<li>Task: {props.title}</li>
)
};
ReactDOM.render(
<TaskList />,
document.getElementById('app')
)
</script>


Hope you can help.

Answer Source

You got a typo error:

getInitialState: function (instead of funtion)