React js onClick can't pass value to method

Question

I want to read the onClick event value properties. But when I click on it, I see something like this on the console:

SyntheticMouseEvent {dispatchConfig: Ob         


        

Answer 1

Implementing show total count from an object by passing count as a parameter from main to sub components as described below.

Here is MainComponent.js

import React, { Component } from "react";

import SubComp from "./subcomponent";

class App extends Component {

  getTotalCount = (count) => {
    this.setState({
      total: this.state.total + count
    })
  };

  state = {
    total: 0
  };

  render() {
    const someData = [
      { name: "one", count: 200 },
      { name: "two", count: 100 },
      { name: "three", count: 50 }
    ];
    return (
      

        {someData.map((nameAndCount, i) => {
          return (
            
          );
        })}
        
Total Count: {this.state.total}
      
    );
  }
}

export default App;

And Here is SubComp.js

import React, { Component } from 'react';
export default class SubComp extends Component {

  calculateTotal = () =>{
    this.props.getTotal(this.props.count);
  }

  render() {
    return (
      

        
 Name: {this.props.name} || Count: {this.props.count}
      
    )
  }
};

Try to implement above and you will get exact scenario that how pass parameters works in reactjs on any DOM method.