I am just learning, solidity with react and web3 and I am facing the issue on page load the callback event of web3 called multiple time the number is same as I called a solidity function and that emit that event in past.

Smart Contact:-

pragma solidity ^0.5.0;

contract Institute{
struct InstituteDetails {
    uint id;
    string name;
    uint studentCount;

mapping(uint => InstituteDetails) public Institutes;

constructor() public{

event instituteCreatedEvent (
    uint  id
 // Store Candidates Count
uint public instituteCount;

function addInstitute (string memory _name) public {
    instituteCount ++;
    Institutes[instituteCount] = InstituteDetails(instituteCount, 
_name, 0);
    emit instituteCreatedEvent(instituteCount);

React component

    import React,  { useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import { Button, Modal, Table, thead, tr, th, td, tbody } from "react-bootstrap";

import TruffleContract from 'truffle-contract'
import Institute from '../abis/Institute.json'
import web3Data from'./SharingData'

function Homepage(props){
  const [show, setShow] = useState(false);
  const [instituteName, setInstitute] = useState(false);
  const [instituteList, setInstituteList] = useState([]);
  const [instituteInstance, setInstituteInstance] = useState();
  const institute = TruffleContract(Institute)

  useEffect(() => {

  useEffect(() => {
    props.web3.eth.getCoinbase((err, account) => {
      institute.deployed().then((instituteObj) => {

  const watchEvents  = async (instituteObj)=> {
      fromBlock: 0,
      toBlock: 'latest'
    }, async (error,result) => {
      if(result&& result.args.id){
        const InstitutesArray = [];
         for (var i = 1; i <= result.args.id.toNumber(); i++) {
          await instituteObj.Institutes(i).then((instObj) => {
              id: instObj[0].toNumber(),
              name: instObj[1],
              studentCount: instObj[2].toNumber()
      else if(result&& !result.args.id){

  const handleClose = (isSubmitted) => {
    if(isSubmitted && instituteInstance){
      instituteInstance.addInstitute(instituteName,{ from: props.account });
  const handleShow = () => setShow(true);

  const nameChange = (e) => {

  const InstituteListComp =[];
  console.log('instituteList.length', instituteList.length)
  for (var i = 0; i < instituteList.length; i++) {
    InstituteListComp.push(<tr key={'key'+i}>

    return (
      <div className="Homepage">
      <h1>Welcome in BlockChain IMS</h1>

      <Table striped bordered hover> 
  <Button variant="primary" onClick={handleShow}>
        Create School
      <Modal show={show} onHide={handleClose}>
        <Modal.Header closeButton>
          <Modal.Title>Create School</Modal.Title>
        <Modal.Body><input onChange={nameChange} /></Modal.Body>
          <Button variant="secondary" onClick={()=>handleClose(true)}>
          <Button variant="primary" onClick={handleClose}>

Homepage.propTypes = {
  Homepage: PropTypes.func,
  isError: PropTypes.bool,
  web3: PropTypes.object,
  account: PropTypes.string,
export default Homepage;
  • 2
    I'm voting to close this question as off-topic because there is no question here. – goodvibration Aug 2 at 6:52
  • Please check now I have updated it – Rathore Aug 7 at 15:44

You are watching the events from

fromBlock: 0,


toBlock: 'latest'

so it seems logical it will fire for all the past events. It you only want recent events you can change the fromBlock.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.