[Solved]-How to make a loop to reuse a function-Reactjs

Are you looking for something like this? Check my demo below.

import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';

class App extends Component {
  constructor() {
    super();
    this.state = {
      numbers: [1, 2, 3, 4, 5, 6, 7, 8, 9, '*', 0, '#'],
      letters: ['', 'abc', 'def', 'ghi', 'jkl', 'mno', 'pqrs', 'tuv', 'wxyz', '', '', ''],
      numberClicked: [],
      addClicked: []
    };
  }

  componentWillMount()
  {
    const v = [];
    for (var i = 0; i < 12; i++)
      v.push("notClicked")
    this.setState({
      addClicked: v
    })
    //console.log(v)
  }

  update = (number) => {
    const n = [...this.state.numberClicked]
    const c = [...this.state.addClicked]
    c[number - 1] = 'clicked'
    console.log(c)
    n.push(number)
    this.setState({
      numberClicked: n,
      addClicked: c 
    }, () => {
        let a = "";
        for (var i in this.state.numberClicked)
        {
          a = a + this.state.numberClicked[i] + " "
        }
        console.log("All Values: ", a)
    })
  }

  render() {
    return (
      <Numbers numbers={this.state.numbers} letters={this.state.letters} update={this.update}/>
    );
  }
}

class Numbers extends Component {
  constructor(props) {
    super(props)
  }

  render() {
    return (
      <div className="parent-wrapper">
        <div className="parent">
            <div className="child" onClick={this.props.update.bind(this, "1")}><h1>{this.props.numbers[0]}</h1><p>{this.props.letters[0]}</p></div>
            <div className="child" onClick={this.props.update.bind(this, "2")}><h1>{this.props.numbers[1]}</h1><p style={{marginLeft: "16px"}}>{this.props.letters[1]}</p></div>
            <div className="child" onClick={this.props.update.bind(this, "3")}><h1>{this.props.numbers[2]}</h1><p style={{marginLeft: "17px"}}>{this.props.letters[2]}</p></div>
            <div className="child" onClick={this.props.update.bind(this, "4")}><h1>{this.props.numbers[3]}</h1><p style={{marginLeft: "17px"}}>{this.props.letters[3]}</p></div>
            <div className="child" onClick={this.props.update.bind(this, "5")}><h1>{this.props.numbers[4]}</h1><p style={{marginLeft: "20px"}}>{this.props.letters[4]}</p></div>
            <div className="child" onClick={this.props.update.bind(this, "6")}><h1>{this.props.numbers[5]}</h1><p style={{marginLeft: "14px"}}>{this.props.letters[5]}</p></div>
            <div className="child" onClick={this.props.update.bind(this, "7")}><h1>{this.props.numbers[6]}</h1><p style={{marginLeft: "13px"}}>{this.props.letters[6]}</p></div>
            <div className="child" onClick={this.props.update.bind(this, "8")}><h1>{this.props.numbers[7]}</h1><p style={{marginLeft: "17px"}}>{this.props.letters[7]}</p></div>
            <div className="child" onClick={this.props.update.bind(this, "9")}><h1>{this.props.numbers[8]}</h1><p style={{marginLeft: "12px"}}>{this.props.letters[8]}</p></div>
            <div className="child" onClick={this.props.update.bind(this, "10")}><h1>{this.props.numbers[9]}</h1><p>{this.props.letters[9]}</p></div>
            <div className="child" onClick={this.props.update.bind(this, "11")}><h1>{this.props.numbers[10]}</h1><p>{this.props.letters[10]}</p></div>
            <div className="child" onClick={this.props.update.bind(this, "12")}><h1>{this.props.numbers[11]}</h1><p>{this.props.letters[11]}</p></div>
        </div>
    </div>
    );
  }
}

render(<App />, document.getElementById('root'));

Demo