Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

240
Visualizações
How should I write this conditions to make the button onClick function do what I want with my array?

I have an array of objects that is basically like this.

const characters = [
{
id: 1
name: batman
biography: {
born-in: gotham
good-or-bad: good
}
stats: {
strength: 85
speed: 90
intelligence: 95
}
}
{
id: 2
name: superman
biography: {
born-in: krypton
good-or-bad: good
}
stats: {
strength: 90
speed: 85
intelligence: 80
}
}
{
id: 3
name: joker
biography: {
born-in: gotham
good-or-bad: bad
}
stats: {
strength: 70
speed: 95
intelligence: 100
}
}
]

Then, after mapping and displaying the objects in my page, I add a button that allows the user to mark the character as a favorite. The user can only add up to 6 favorites.

const [favorites, setFavorites = useState([]);

const addFavorite = () => {
favorites.length === 6 ?
console.log("favorites' list is full!") :
setFavorites(favorites.concat(character))
}

{characters.map((character)=>{
const {props} = character;
return (
<div>{props}</div>
<button onClick={addFavorite}>add to favorites</button>
);
})}

Now, what I want to do (and I don't know how to, after many attempts)

  1. preventing the user to add the same character twice to favorites. (I have tried with favorites.contains(character)? or favorites.contains({character})? but it didn't work.)
  2. if the character is already a favorite, make the button change to a button that removes the favorite instead (changing both the function and the button text.)(I have no idea how to do this).
  3. Make an average score of all favorites' each stat. (For example, with your chosen favorites your average speed is xxx and your average strength is xxx).
  4. Last, but not least, favorites list must have up to 3 good characters and 3 bad characters. So, if the good or bad characters in the favorites' list are already 3, user cannot choose another good or bad character as favorite. I also don't know how to proceed with this one.

I'm working in a school project and I found my way through most of it, but I realise I still have things to learn, mostly about object props and how to access to them. Thank you. If anything is not clear, please say so and I will add the required data.

about 4 years ago · Juan Pablo Isaza
1 Respostas
Responde à pergunta

0

So, since you've already figured it out yourself, here is the detailed explanation.

find is a function ( or what fancy developers like to say a higher order function ) available for javascript arrays that accepts a function which must return a boolean value i.e., either true or false.

---Quick detour---

A function which must return a boolean value is called a predicate, and this is exactly what's available in the IDE hints if you hover over find enter image description here

---Detour end---

It accepts multiple parameters, with only the predicate being mandatory, and the rest are optional, i'm skipping all the optional ones, so that's your homework, read the docs or the articles at the end of this answer.

As you can read in the hint itself, it will call the predicate, once for each element in the array, until it can find one which will return true & return the value of the element, undefined otherwise.

Which means : that the first parameter in the predicate is going to be your object and the same predicate will be executed on it for all the elements.

Now observe your solution carefully:

find( savedChar => savedChar.id === character.id )

savedChar is one of the objects in the array, and it needs to be compared with the character object, and id which is the short form of identity will always find it accurately.

Finally, quick answers to your problems.

  1. Use find to see if the character is already available, if yes, simply don't add it in your collection.

  2. This will require you to change your render logic, find if the object is in the favorites and render it differently.

  3. just like find, there is a method called reduce, why don't you give it a shot? but that might be a little difficult, so you can use a simple for loop instead.

  4. find(savedChar => savedChar["good-or-bad"]) <- what would this result? figure it out.

And for more reading material : https://medium.com/swlh/array-helper-methods-in-es6-28fc5e5a5dc9

same but more detailed : https://codeburst.io/learn-and-understand-es6-helpers-easily-d41401184487

about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda