Todo List

Write a TodoList component that expects an items prop, and a list of objects, each with text and done properties.

TodoList also accepts an onItemClick function prop, which should be called when a user clicks an item in the list, if the item is not marked as done. Otherwise, the onItemClick should not be called and the click event itself should not be propagated further. The function should be called the item object from the items list as the first parameter and the event as the second parameter.

HTML5, CSS3, React v16

Show starting code

const TodoItem = (props) => <li onClick={props.onClick}>{props.item.text}</li>

class TodoList extends React.Component {
  render() {
    const { items, onClick } = this.props;
    return (<ul onClick={onClick}>
      {items.map((item, index) => 
                 <TodoItem item={item} key={index} onClick={this.handleItemClick.bind(this, item)}/>)}
    </ul>);
  }
  
  handleItemClick(item, event) {
    // Write your code here
  }
}


const items = [ { text: 'Buy grocery', done: true },
  { text: 'Play guitar', done: false },
  { text: 'Romantic dinner', done: false }
];

const App = (props) => <TodoList
  items={props.items}
  onItemClick={(item, event) => { console.log(item, event) }}
/>;

document.body.innerHTML = "<div id='root'></div>";
const rootElement = document.getElementById("root");
ReactDOM.render(<App items={items}/>, rootElement);

Clicking on a not done item should trigger onItemClick: Wrong answer
Clicking on a done item should not trigger onItemClick or a parent click: Wrong answer

Use this question for your test

<< Previous Next >> Back to questions

Score Distribution

Would you like to see our other questions?

We have 500+ premium hand-crafted questions for 30+ job skills and 10+ coding language. We prefer questions with small samples of actual work over academic problems or brain teasers.

Visit our question library

Private Concierge

Send us an email with an explanation of your testing needs and a list of candidates. We will create an appropriate test, invite your candidates, review their results, and send you a detailed report.

Would you like to see our tests? The following tests contain React related questions:

HTML/CSS and React Online Test

HTML/CSS, JavaScript, and React Online Test

HTML/CSS, React, Node.js, and SQL Online Test

HTML/CSS, React, and Node.js Online Test

React Online Test

On the TestDome Blog

Screening Applicants: The Good, the Bad and the Ugly

Since we’re all biased and we use incorrect proxies, why not just outsource hiring to experts or recruitment agencies? After all, they’ve been screening people for many years, so they must know how to do it right?

Not really. I was surprised to discover that many experts disagree with each other. Everybody praises their pet method and criticises the others. Many of these methods look legitimate, but are based on...