1

Estoy utilizando React (soy principiante), estoy realizando una petición a una API, básicamente estoy haciendo una búsqueda de un producto por el nombre, pero el problema esta en que quiero mostrar texto html cuando el usuario escriba algo que no se encuentre en la API, he intentado realizando condiciones y nada, hice una prueba escribiendo cualquier cosa y este me retorna un array vacío. El código es el siguiente:

const Business = () => {

    const [info, setInfo] = useState([]);
    const [query, setQuery] = useState('chicken');

    /* searh component */
    const [inputText, setInputText] = useState("");

    const exampleReq = `direccion del api`;
    
    useEffect(() => {
        getRecepies();
    }, [query]);

    const getRecepies = async() =>{
        const response = await fetch(exampleReq);
        const data = await response.json();
        setInfo(data.hits);
    }

    const getSearch = e => {
        e.preventDefault();
        setQuery(inputText)
    }
    return (
        <>
            <Header />
            <div class="container-workers">
                <Search
                    setInputText={setInputText}
                    getSearch={getSearch}
                />
                <div class="each-worker">
                    {info.map(infos =>(
                        <CardBusiness
                            key={infos.recipe.label}
                            title={infos.recipe.label}
                            img={infos.recipe.image}
                        />
                    ))}
                </div>
            </div>
        </>
    )
}

Estoy consumiendo una api de una pagina web. De antemano gracias.

2 respuestas 2

1

Puedes intentar lo siguiente para validar si la respuesta info tiene algún contenido y si no puedes mostrar un texto indicándolo.

      {info.length ? (
        info.map((infos) => (
          <CardBusiness
            key={infos.recipe.label}
            title={infos.recipe.label}
            img={infos.recipe.image}
          />
        ))
      ) : (
        <p>No recipes found!</p>
      )}
2
  • Es otra opción válida, y también harías buen uso del operador ternario. Commented el 24 jun. 2021 a las 2:54
  • Muchas gracias por la respuesta, también me funciona de esta manera. Commented el 27 jun. 2021 a las 22:37
0

Se puede utilizar un operador ternario.

En React, se puede usar así:

{ info == "" ? (
        <p>Texto a mostrar si no hay resultados de la API</p>
    ) : (
        info.map(infos =>(
            <CardBusiness
                key={infos.recipe.label}
                title={infos.recipe.label}
                img={infos.recipe.image}
            />
        ))
    )
 }

Ahí, si el estado info es igual a un vacío "", se muestra el texto con los <p></p> informando que no hubo resultados. Pero si la API sí trajo resultados, le hace el .map al array con su contenido.

6
  • Gracias por la ayuda. pero no me muestra nada en pantalla, no se si las comillas influyen en la condicional, pero de todos modos la cambie y pues igual no sale nada Commented el 24 jun. 2021 a las 1:40
  • Es verdad, no está bien que sean las llaves entre comillas. La manera correcta es validar si info es igual a "", es decir, si info está vacío. Porque el array vacío se interpreta como esas dobles comillas, o sea que no tiene contenido. Ya lo edité en mi respuesta. Vuélvelo a intentar así, y esta vez debería funcionar. Commented el 24 jun. 2021 a las 2:41
  • muchas gracias por la ayuda, ya funcionó Commented el 25 jun. 2021 a las 17:55
  • Genial. No olvides de marcar una respuesta como "aceptada" si realmente te fue útil, aquí se explica cómo hacerlo. Al acostumbrarte a hacer eso con todas tus preguntas resueltas, ayudarás a identificar más rápidamente las soluciones que funcionan a todas las otras personas que tengan tu mismo problema. Commented el 25 jun. 2021 a las 18:08
  • solo una consulta, si la petición devuelve un array vacío "[]" la condición no tendría que ser con [], pero no me funciona con eso, en cambio me funciona con "". Commented el 27 jun. 2021 a las 22:49

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.