[React & Debug] Quick way to debug Stateless component

For example we have the following code:

const TodoList = (props) => (
  <div className="Todo-List">
    <ul>
      {props.todos.map(todo => <TodoItem key={todo.id} {...todo} />)}
    </ul>
  </div>
)

 

Because we wrote as function component, it is using the implicit return. To debug what props have been passed in. we can add console.log before the function:

const TodoList = (props) => console.log(props) || (
  <div className="Todo-List">
    <ul>
      {props.todos.map(todo => <TodoItem key={todo.id} {...todo} />)}
    </ul>
  </div>
)

Because console.log return "underfined", so in the end, it will also run the function to render the statless component.