title: Error while passing data from a child to parent component in reactjs
body: <p>As soon as ObjectRow's onchange1 and onchange2 are triggered, it gives a runtime error of sendColor is not a function(same for sendName) . As my form submit button is present in the parent component of ObjectRow, I am trying to get the data of ObjectRow's input in my parent component so as to proceed further. Is it the right way to do so or any other method better?</p>
  <pre><code>     const rows = []
              for (let i = 0; i &lt; rewards; i++) {
          
                  rows.push(&lt;ObjectRow key={i} num={i} sendColor={sendColor} sendName={sendName} /&gt;);
                  console.log(angle)
              }
       
  
      const sendColor = (data) =&gt; {
                  console.log(data)
              }
          
              const sendName = (data) =&gt; {
                  console.log(data)
              }
  
  
  
  
    &lt;form onSubmit={onsubmit}&gt;
              {rows}
          &lt;div className='flex justify-center'&gt; 
  &lt;button className={`${rewards &gt; 0 ? 'bg-red-700 w-4/12 rounded-md  p-2 font-normal text-lg text-white' : 'hidden'}`}&gt;Submit&lt;/button&gt;
  &lt;/div&gt; 
  &lt;/form&gt;
      
  </code></pre>
  <p>Below is the Objectrow component:</p>
  <pre><code>    import React from 'react'
      import {useState} from 'react'
      
      function ObjectRow({num,sendColor,sendName}) { 
      
          
        const [name, setName] = useState('')
        const [color,setColor]=useState('')
         
        
          
        const handlechange1=(e)=&gt;{
            
              setColor(e.target.value)
              sendColor(color)
          }
      
        const handlechange2 = (e) =&gt; {
      
           setName(e.target.value)
            sendName(name)
        }
      
         
        
         
        
      
         
        return (
         &lt;&gt;
      &lt;div className='text-xl font-semibold text-violet-700'&gt;Reward{num+1}&lt;/div&gt;
                   
                    &lt;label&gt;Reward Name&lt;/label&gt;
                    &lt;input type='text'
                    name=&quot;rewardName&quot; 
                      onChange={handlechange2}
                      value={name} 
                     className='bg-slate-400 my-4  mx-2'&gt;
                      &lt;/input&gt;                                  
              
               
                    &lt;label&gt;Reward Color&lt;/label&gt;
                    &lt;input type='text' 
                    name=&quot;rewardColor&quot;
                   onChange={handlechange1} 
                     value={color}
                     className='bg-slate-400 my-4  mx-2'&gt;
                    &lt;/input&gt;              
                
                 
                &lt;hr /&gt; 
         &lt;/&gt;
        )
      }
      
      export default ObjectRow
  </code></pre>