How do i confirm if an element is present in an array in NextJS-CodePudding

So i just started learning React/Next JS few weeks ago and I haven't really been consistent with the learning but I got a job and I have been trying to get along with it so now the problem i am having is, I am to make an array of numbers then I am to make an input field where it will be checked if a certain number is present in the arrays or not(I believe this is where if/else statement will come in) and popup message will show if the number is present or not

I feel like i know what to do but the problem is how to do it this is my code, i have written the array numbers, now i need what to do next so as to make the the button have onclick function that will loop through the array and check whether whatever number inputted in the input field is present in the array or not

export default function Home() {
  const arr = [1, 2, 3, 4, 5, 6];
  return (
    <div >

    <title></title>
    <meta name="description" content="machal" />
    <link rel="icon" href="/favicon.ico" />
  </Head>

<form>
        <div className='mb-3 pb-2 flex flex-column items-center justify-center'>
          <div> 
          <label for="first_name" >WHITELIST CHECKER</label>
            <input type="text" id="first_name"  placeholder="0x7" required> 
            </input>
            <div className='flex flex-column'>
            <button className=' p-2 mt-2 inline-flex text-center ml-12 w:4/5 text-rose-500 hover:bg-rose-500 hover:text-white ease-in-out'>CHECK</button>
            </div>
          </div>
        </div>
      </form>

      </div>



   
  )
}

CodePudding user response：

@Neenoe Maybe this will work for you.

import { useState } from "react";

const Home = () => {
  const [value, setValue] = useState("");
  const [error, setError] = useState(null);
  const arr = [1, 2, 3, 4, 5, 6];

  function handleCLick(e) {
    e.preventDefault();
    arr.includes(parseInt(value))
      ? setError(`${value} is present in the array.`)
      : setError(`${value} is not present in the array.`);
  }

  return (
    <div>
      <input
        type="text"
        id="first_name"
        className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white mb-2 dark:focus:ring-blue-500 dark:focus:border-blue-500"
        placeholder="0x7"
        value={value}
        onChange={(e) => setValue(e.target.value)}
        required
      />
      {error ? error : null}
      <button
        onClick={(e) => {
          handleCLick(e);
        }}
      >
        Check
      </button>
    </div>
  );
};

export default Home;

CodePudding user response：


import react, { useState } from "react";

export default function Home() {
  const arr = [1, 2, 3, 4, 5, 6];

  const warningText= "*something";

  const [isExisting,setIsExisting] = useState(false);

  const onInputChange = event => {
    const text = event.target.value;
    setIsExisting(arr.includes(parseInt(text,10)));
  }

  return (
    <>
      <input type="text" id="first_name" onChange={onInputChange} />
      {isExisting && <p>{warningText}</p>}
    </>
  )
}

i think you can use above code

if you are start learning react, "lodash" library maybe helpful for you