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

206
Visualizações
How to find non-matching numbers in an array?

This is number memory game in Reactjs


The first number appears randomly. For example: 123.

The second number is what I will enter: 123.

That is correct.


So if I enter incorrectly for example 124, then 4 should be crossed out.

output should be like that:

<div>
  <span>1</span>
  <span>2</span>
  <span className="wrong">4</span>
</div>

More example:

random_num: 4573

input: 4674

output: 4674


random_num: 4573

input: 4674761

output: 4674761


random_num: 123

input: 123456

output: 123456

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

0

From your examples, I assume that those digits should be in the correct places too.

As you have not provided an example with a case where user input is shorter than the random number, I'll assume that in this case such option either does not exist or you are handling it in some other way.

Now that my assumptions are defined, you can do this by iterating over user input number by converting it to a string and comparing symbols one by one. You need to check if the symbol at position i is equal in both numbers (input[i] === random_num[i]), just don't forget that while iterating over input, you can increase i beyond the length of random_num, you should check those cases and mark as wrong every input[i] where i > random_num.length

about 4 years ago · Juan Pablo Isaza Relatório

0

This is my attempt

class NumberMemoryGame extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: '', answer: '123456'};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    event.preventDefault();
  }

  render() {
    return (
        <div>
        <form onSubmit={this.handleSubmit}>
          <label>
            Guess:
            <input type="text" value={this.state.value} onChange={this.handleChange} />
          </label>
          <input type="submit" value="Submit" />
        </form>
        <div>
          {[...this.state.value].map((char, i) => (
          <span className={`${(char === this.state.answer[i]) ? 'right' : 'wrong'}`}>
           {char}
          </span>))}
        </div>
      </div>
    );
  }
}

You can find the JS Fiddle here.

about 4 years ago · Juan Pablo Isaza Relatório

0

Assuming you are passing both the entries as arrays to a component and let say array_1 is the original entry and array_2 is the second entry, then all you got to do is

function App({ array_1, array_2 }) {
  return (
    <div>
      {array_2.map((val, i) => {
        if (val === array_1[i]) {
          return <span>{val}</span>;
        }
        return <span className="wrong">{val}</span>;
      })}
    </div>
  );
}
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