Home / Questions / 330999
Accepted
Fabian
Asked: 2020-02-21 07:17:27 +0800 CST 2020-02-21 07:17:27 +0800 CST

Doubt about a useState as an object with arrays

  • 772

I have a little doubt, I have a status like this

const [searchItems, setSearchItems] = useState({
    videos: [],
    texts: [],
    audios: []
});

My idea is to push these arrays inside the object searchItems, if it were pure javascript it would be something likeseachItems.videos.push(object)

but being a state with useState, I must make use of thesetSearchItems

Does anyone know how to do it ?

i have something like

setSearchItems({
    videos: test_search.videos.filter(video =>
        video.name.includes(search)
    )
});

but it doesn't work well at all.

I managed to fix it, but now I have another problem. I have this code

useEffect(() => {
    if (showVideos) {
        setSearchItems({
            ...searchItems,
            videos: test_search.videos.filter(video =>
                video.name.includes(search)
            )
        });
    }
    if (showTexts) {
        setSearchItems({
            ...searchItems,
            texts: test_search.texts.filter(text =>
                text.name.includes(search)
            )
        });
    }
    if (showAudios) {
        setSearchItems({
            ...searchItems,
            audios: test_search.audios.filter(audio =>
                audio.name.includes(search)
            )
        });
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
}, [search, showVideos, showTexts, showAudios]);

The problem is that it is only assigning the last one, in this case the audios, the others are left empty, how could I solve this?

Beforehand thank you very much.

reactjs

3 Answers

  1. Best Answer

    When you make use of the setSearchItems function you have to pass the entire object, not just the video as in this case. What you can do is use the spread operator (...) to copy the object and replace the field of the object you want (videos in this case).

    Example:

    setSearchItems({...searchItems,
                videos: test_search.videos.filter(video =>
                          video.name.includes(search)
                         )
})

    With this, what you do is copy the searchItems object and replace the value of videos with the one you indicate with that filter.

    I hope it works for you. Greetings.

    • 4

  2. Suppose you were to search in a list of fruits:

    code in your html:

    <div id="content"></div>

    ------------search component code

    var DynamicSearch = React.createClass({

  //estado inicial
  getInitialState: function(){
    return { searchString: '' };
  },

  // aqui el valor de tu texto de busqueda
  handleChange: function(event){
      this.setState({searchString:event.target.value});
  },

  render: function() {

    var fruits= this.props.items;
    var searchString = this.state.searchString.trim().toLowerCase();

    //filtrado de lista
    if(searchString.length > 0){
      fruits = fruits.filter(function(fruit){
        return fruit.name.toLowerCase().match( searchString );
      });
    }

    return (
      <div>
        <input type="text" value={this.state.searchString} onChange={this.handleChange} placeholder="Search!" />
        <ul>
          { fruits.map(function(fruit){ return <li>{fruit.name} </li> }) }
        </ul>
      </div>
    )
  }

});

var fruits= [
  {"name": "Manzana"}, {"name": "Platano"}, {"name": "Uva"}, {"name": "Naranja"},
  {"name": "Fresa"}, {"name": "Ciruelo"}, {"name": "Pera"}
];

React.render(
  <DynamicSearch items={ fruits} />,
  document.getElementById('content')
);
    • 1

  3. What I suggest you do is use the spread operator , that is ...elementosto be able to obtain the copy of the elements of the object and also make use of destructuring to decompose an object and thus facilitate its handling.

    Now, let's say you have a new element for your video array: mivideoand we need to push or insert it into our array videos.

    What we will do is the following:

    // Nuestro State con previa data para el ejemplo
const [searchItems, setSearchItems] = useState({
    videos: [{id: 1, title: 'Video 1'}],
    texts: [{id: 1, title: 'Texto 1'}],
    audios: [{id: 1, title: 'Audio 1'}]
});

// Aplicamos DESESTRUCTURACIÓN
const {videos, texts, audios} = searchItems;

    Now, we proceed to add it :

        // Nuestro elemento a insertar
    let mivideo = {
        id: 2,
        title: 'Video 2'
    };

    // Agrega el elemento a nuestro array
    videos.push(mivideo);

    // Actualizamos el estado con nuestro array
    setSearchItems({
        ...searchItems, // Obtenemos elementos con un spread operator
        videos // Reemplazamos array de videos
    });

    Departure:

    output-react-js

    As you will notice, a new item has been added to our video array. Similarly, you can make a pushto others arrays.

    • 0