title: NextJs: Adding value whenever it's object is on clicked
body: <p>I'm currently working on how add the value when it is on clicked. However, I've tried to add a conditional statement between to capture whether the value is on clicked but I guess I'm missing something or I just targeting it's value not the object.</p>
  <pre><code>&lt;Row&gt;
      &lt;p&gt;&lt;b&gt;Account Verification&lt;/b&gt;&lt;/p&gt;
      {
          verifications.map(record =&gt; {
              return(
                  &lt;Col xs={12} md={3} mb={3}&gt;
                      &lt;Form.Group
                          key={record.id} 
                          className=&quot;mb-3&quot; 
                          controlId={record.verifyName}
                          &gt;
                          &lt;Form.Check 
                              id={record.verifyName}
                              onChange={e=&gt; {
                              const value = e.target.value;
                              collection.push(value);
                              console.log(collection)
                          }}
                          key={record._id} tag=&quot;verify&quot; value={record.verifyName} label={record.verifyName} /&gt;
                        &lt;/Form.Group&gt;
                  &lt;/Col&gt;  
                  )
          })
      }
  &lt;/Row&gt;
  </code></pre>
  <p>What I did so far is add an if statement and wrap the collection array but it didn't worked.</p>
  <pre><code>if(value.checked == true) {
     collection.push(valued)
  }
  </code></pre>
  <p>Need help on this. The system currently accepts data whether is checked or not as long as you click the value.</p>