Questions[reactjs]

When selecting a value of my select I need the entire select to be disabled as such and only show the value that I select, I have tried in several ways but I have not been able to make it work for me. I also need a button to appear that says activate and when I click it, the select becomes active again.

import React,{useState} from 'react'

function Pruebas() {
  const [select, setSelect] = useState();

  const elselect =  () => {
   
    
  }
  return (
    <div>
      <form>
        
        <select  onChange={ elselect }>
          <option value="uno">uno</option>
          <option value="uno">dos</option>
        </select>
      </form>
      
    </div>
  )
}

export default Pruebas

I have a problem in a part of the code where I get the error Warning: Each child in a list should have a unique "key" prop. , I have added the key property but having an if inside the map gives me that warning. If I delete the if and try leaving one of the components the error is not shown but if I do the if it is shown.

return(
       
            <div className="main">
                {video.map(vid => (
                    <>
                    { vid.video !== '' ? (  
                         <VideoPlayer id={vid.id} video={vid.video} name={vid.name} poster={vid.poster} key={vid.id}  />
                    ) : (
                        <ImgNoVideo id={vid.id} url={vid.url} name={vid.name} poster={vid.poster} key={vid.id} />
                    )}
                    </>
                ))}
            </div>
    );

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.

For example creating this component in Reactjs as it would be with EcmaScript6?

var HelloWorldComponent = React.createClass({
    render: function() {
        return <div className="message">Hello World! </div>
    }
})

Using ReactJS I need to update an element of an array using the immutability helpers .

I have something like this:

this.setState(React.addons.update(this.state.collection[index], {
  property: { $set: !this.state.collection[index].property }
}));

In which indexis effectively the index of the element to modify in the collection, and propertya boolean that I want to negate on update.

The problem is that the code is not modifying the propertyelement of the collection, but rather it is generating a property propertyon the object this.state- so it this.stateends up being something like {collection: [...], property: true}.

In Nested Collections it says that I would have to use a hash with the index of the element as the key, but I have the index in a variable, so I understand that the update is ambiguous:

this.setState(React.addons.update(this.state, {
  collection: {
    index: {
      property: { $set: !this.state.collection[index].property }
    }
  }
}));

But it tells me that Cannot read property 'property' of undefined(ie this.state.collectionit doesn't have a property index, which is understandable).

How can i solve this?

I know I should use $applyinstead of $update, but that's not the point of the question :)