title: How to set a local variable without using useState in ReactJs
body: <p>i am working on project in which i have two input fields and submit button.When i click submit data from both fields store in a variable.Now i want to perform some function on this data As shown in my code.</p>
  <p>Vanilla javascript code perfectly fine.But facing problem in React js</p>
  <pre><code> var el=document.getElementById(&quot;button&quot;);
  
  if(el)
  {
  el.addEventListener(&quot;click&quot;, function(max,min)
  {
  
      const max1=document.getElementById(&quot;max&quot;).value;
      const min1=document.getElementById(&quot;min&quot;).value;
  
      const colors=['#000000', '#0004BF', '#0008FF', '#0140FF', '#0080FF', '#03BFFF', '#02FBFF', '#41FBBF', '#81FC81', '#BFFD41', '#FFFF00', '#FFBF01', '#FF8001', '#FF4000', '#BF2500', '#801500', '#FFFFFF']
      const n=16;
      var v=[];
  
      var  lmin = Math.log(min1);
      var  lmax = Math.log(max1);
      var delta = (lmax-lmin)/(n-1);
      for(let i = 1;i&lt;16  ;i++)
      {
          let obj={}
          obj.key2=Math.exp(lmin+delta*(i-1)).toFixed(2);
          obj.key1=Math.exp(lmin+delta*((i+1)-1)).toFixed(2)
          obj.value=colors[i];
      
          v.push(obj);
      
      }
      console.log(v)
    
  print(v);
   }
  )}
  </code></pre>
  <p>Below React js code.I want to implement same code in react as i implement in simple js.</p>
  <pre><code>  const maxFreq = useRef();
  const [val,setVal] = useState([])
  
  const [obj,setObj]=useState({key1:0,key2:0:value:&quot;&quot;});
  const minFreq = useRef();
  const colors=['#000000', '#0004BF', '#0008FF', '#0140FF', '#0080FF', '#03BFFF', '#02FBFF', '#41FBBF', '#81FC81', '#BFFD41', '#FFFF00', '#FFBF01', '#FF8001', '#FF4000', '#BF2500', '#801500', '#FFFFFF']
  
  const handleClick=(e)=&gt;{
      e.preventDefault();
           const min1=maxFreq.current.value;
           const max1=minFreq.current.value;
           const lmin = Math.log(min1);
           const  lmax = Math.log(max1);
           let delta = (lmax-lmin)/(n-1);
          
           for(let i = 1;i&lt;16  ;i++)
           {
               
               var key11=Math.exp(lmin+delta*(i-1)).toFixed(2);
               var key21=Math.exp(lmin+delta*((i+1)-1)).toFixed(2)
               let value1=colors[i];
               
              // console.log(`key1:${key11}\nkey2:${key21}\nvalue:${value1}`)
              setObj({...obj,
                  
                      key1:key11,
                      key2:key21,
                      value:value1
                  
  
          
              });
              // console.log(obj);
  
  
              setVal(val.concat(obj));
           
           }
         
   
  
  }
  </code></pre>
  <p>when this data saved in val array it only print last calculated value.It does not provide all 16 object.I just did this in vanilla javascript.But i am facing problem in React js</p>