Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

206
Vistas
UseState() throwing a white screen React

im making a react code, it is supposed to grab each value from cardInfo and put it in cards and be able to search and filter each card, this works fine and the filter as well. Although when i add the input with the const [searchTerm, setSearchTerm] = useState(''); I end up with a white screen.

import React from "react";
import { useState } from "react/cjs/react.production.min";
import '../css/productFilters.css';

function ProductsFilter(){
    const cardInfo=[
        {image:"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQz3fIWD8EQsvcN8vjqj3RBFXOt0Ybr1C5v5g&usqp=CAU",title:"Lebron James",text:"The worst"},
        {image:"https://assets.bwbx.io/images/users/iqjWHBFdfxIU/iRvzLV4Dj3Y4/v0/1200x-1.jpg",title:"James Harden",text:"Meh"},
        {image:"https://i.insider.com/5a0dc09a3dbef484008b67e7?width=1000&format=jpeg",title:"Speph Curry",text:"Good"},
        {image:"https://depor.com/resizer/Wtf5Y1e8fWd5zRd3Do6yRgV58Fg=/580x330/smart/filters:format(jpeg):quality(75)/cloudfront-us-east-1.images.arcpublishing.com/elcomercio/IKJYQ4ZQ7RFWZFE57TNEBKD5SQ.jpg",title:"Michael Jordan",text:"GOAT"},
    ]
    const renderCard=(card,index)=>{
        return(
            <ul className="card">
                <li><img src={card.image}></img></li>
                <li><p className="tittle-card">{card.title}</p></li>
                <li><p className="text-card">{card.text}</p></li>
            </ul>
        )
    }
    
    const [searchTerm, setSearchTerm] = useState('');

    return (
        <div>
            <input
                type="text"
                placeholder="Search..."
                onChange={ (event) => setSearchTerm(event.target.value)}
            />
            <div className="container">
                {cardInfo.filter((val)=>{
                    if (searchTerm==""){
                        return val
                    }

                    else if (val.title.toLocaleLowerCase().includes(searchTerm.toLocaleLowerCase())){
                        return val
                    }
                }).map(renderCard)}
            </div>
        </div>
        )
}
export default ProductsFilter

about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

Thank Prograk:

You are importing useState wrong. Try importing useState from react ie. import React, {useState } from "react" – prograk

The code is now working! I leave the answer

import React, { useState } from "react";
import { Link } from "react-router-dom";
import '../css/productFilters.css';

function ProductsFilter(){
    const cardInfo=[
        {image:"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQz3fIWD8EQsvcN8vjqj3RBFXOt0Ybr1C5v5g&usqp=CAU",title:"Lebron James",text:"The worst"},
        {image:"https://assets.bwbx.io/images/users/iqjWHBFdfxIU/iRvzLV4Dj3Y4/v0/1200x-1.jpg",title:"James Harden",text:"Meh"},
        {image:"https://i.insider.com/5a0dc09a3dbef484008b67e7?width=1000&format=jpeg",title:"Speph Curry",text:"Good"},
        {image:"https://depor.com/resizer/Wtf5Y1e8fWd5zRd3Do6yRgV58Fg=/580x330/smart/filters:format(jpeg):quality(75)/cloudfront-us-east-1.images.arcpublishing.com/elcomercio/IKJYQ4ZQ7RFWZFE57TNEBKD5SQ.jpg",title:"Michael Jordan",text:"GOAT"},
    ]
    const renderCard=(card,index)=>{
        return(
            <ul className="card">
                <li><img src={card.image}></img></li>
                <li><p className="tittle-card">{card.title}</p></li>
                <li><p className="text-card">{card.text}</p></li>
            </ul>
        )
    }
    
    const [searchTerm, setSearchTerm] = useState('');

    return (
        <div>
            <input
                type="text"
                placeholder="Search..."
                onChange={ (event) => setSearchTerm(event.target.value)}
            />
            <div className="container">
                {cardInfo.filter((val)=>{
                    if (searchTerm==""){
                        return val
                    }

                    else if (val.title.toLocaleLowerCase().includes(searchTerm.toLocaleLowerCase())){
                        return val
                    }
                }).map(renderCard)}
            </div>
        </div>
        )
}
export default ProductsFilter
about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda