No sé cómo formular exactamente mi pregunta en Google, por eso lo digo aquí.

Tengo este fragmento de código: <span>{todo.status === "completed" ? <del>{text}</del> : text}</span>

Y quiero reescribirlo para que sea como <span>{checkHandler}</>, pero no funciona y no sé por qué.

¿Por qué funciona la función de taquigrafía, pero si uso la función checkHandler, arroja un error?

(Estoy usando el componente de función)

import React from "react";

const Todo = ({text,setTodos,todos,todo}) =>{

    const deleteHandler = (e) =>{
        setTodos(todos.filter(item => item.id !== todo.id));
    }

    const completeHandler = (e) =>{
        setTodos(todos.map(item => {
            if(item.id === todo.id){
                return{
                    ...item, 
                    status: "completed"
                }
            }
            return item;
        }))
    }
const checkHandler = e => {
  if (todo.status === 'completed') {
    return <del>{text}</del>;
  } else {
    return { text };
  }
};

// ...

return (
  <div className="todo-item">
    <span>{todo.status === 'completed' ? <del>{text}</del> : text}</span>
    <div className="todo-item--completion">
      <button onClick={completeHandler} className="button complete">
        <i className="fas fa-check"></i>
      </button>
      <button onClick={deleteHandler} className="button delete">
        <i className="fas fa-times"></i>
      </button>
    </div>
  </div>
);
}
0
Kapaak 26 oct. 2020 a las 19:41

1 respuesta

La mejor respuesta

Debe pasar un argumento adecuado a la función y también llamarlo dentro de jsx:

const checkHandler = todo => {
  if (todo.status === 'completed') {
    return <del>{text}</del>;
  } else {
    return text;
  }
};

//...
 <span>{checkHandler(todo)}</span>
1
Clarity 26 oct. 2020 a las 16:45