I want to render a div conditionally based on user input in a form.

The user enters a value between 0 - 100 and i have to render the 1 out of 3 divs, based on the value (0 -30, 30-60, 60-100).

Basically i have a form where the user enters the number and below i have to show 1 out of 3 triangles, based on the user input.

Im pretty new to this so would love some help. :D

CodePudding user response：

    here is entire form component
    
     import React, { useState } from "react";

export default function Ex2() {

    const [scoreInfo, setScoreInfo] = useState(false);

    const handleChange = (event) => {
        setScoreInfo({ ...scoreInfo, [event.target.name]: event.target.value });
    }

    const handleSubmit = (event) => {
        event.preventDefault();
        console.log(scoreInfo);
        setScoreInfo({score: ""});
    }

   
  return (
    <div>
      <div>
        <form  onSubmit={handleSubmit}>
          <div>
            <h3>Score input</h3>
          </div>

          <div>
            <input
              type="text"
              name="score"
              placeholder="Whats's the score?"
              value={scoreInfo.score}
            />
          </div>
          <div>
            <button>Submit Score</button>
           
          </div>
           
        </form>
      
      </div>
      <br />
      <div className="containerex2">
        <div className="square">
          <div >
            <h1> Result</h1>
            <p className="slide-text">
              This slide is 100% editable. <br /> Adapt it to your own needs and{" "}
              <br /> capture your audience's <br /> attention.
            </p>
            <div className="circle1">
              <div className="contentc1">01</div>
              <div className="triangle1_2"></div>
            </div>
          </div>
        </div>
        <div className="square2">
          <div >
            <h1> Result</h1>
            <p className="slide-text">
              This slide is 100% editable. <br /> Adapt it to your own needs and{" "}
              <br /> capture your audience's <br /> attention.
            </p>
            <div className="circle2">
              <div className="contentc1">02</div>
              <div className="triangle2_2"></div>
            </div>
          </div>
        </div>
        <div className="square3">
          <div >
            <h1> Result</h1>
            <p className="slide-text">
              This slide is 100% editable. <br /> Adapt it to your own needs and{" "}
              <br /> capture your audience's <br /> attention.
            </p>
            <div className="circle3">
              <div className="contentc1">03</div>
              <div className="triangle3_2"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

    enter code here

CodePudding user response：

const SomeComponent = () => {
  const [number, setNumber] = useState(null);

  const handleNumberChange = (event) => {
    const value = parseInt(event.target.value, 10);
    setNumber(isNaN(value) ? null : value);
  };

  return (
    <div>
      <input value={String(number)} onChange={handleNumberChange} />

      {typeof value === 'number' && value >= 0 && value <= 30 && (
        <Triangle1 />
      )}

      {typeof value === 'number' && value > 30 && value <= 60 && (
        <Triangle2 />
      )}

      {typeof value === 'number' && value > 60 && value <= 100 && (
        <Triangle3 />
      )}
    </div>
  );
};