title: call new function inside a .map in react js hook
body: <p>I'am trying to convert react class to react hook. In react class I use two classes one is to export and another one is called inside .map. This code is running.
  While i do same code in react hook all good but hard to use (ListItem) as function inside the .map of export class.
  FOR EXAMPLE:
  this is called class.</p>
  <pre><code>import { Component } from &quot;react&quot;;
  const totalVec = new Array([]);
  class ListItem extends Component {
  constructor(props) {
      super(props);
      this.state = {
          name: props.value.product.name,
          costo: props.value.product.costo,
          quantita: props.value.product.quantita,
          totale: 0
      }
      this.handleChange = this.handleChange.bind(this)
      this.calcoloTotale = this.calcoloTotale.bind(this)
  }
  handleChange = (event) =&gt; {
      const target = event.target;
      const name = target.name;
      const value = target.value;
  
      this.setState({
          [name]: value
      }, this.calcoloTotale);
  }
  componentDidMount() {
      this.setState(
          { totale: this.state.costo * this.state.quantita },
          function () { totalVec[this.props.value.id] = this.state.totale; this.props.updateGlobalTotal(); });
  }
  calcoloTotale() {
      var Ltotale = this.state.costo * this.state.quantita;
      totalVec[this.props.value.id] = Ltotale;
      this.setState({ totale: Ltotale }, function () { this.props.updateGlobalTotal(); });
  }
  render() {
      return (
          &lt;tr&gt;
              &lt;td&gt;&lt;input type=&quot;text&quot; name=&quot;name&quot; value={this.state.name} onChange={this.handleChange} placeholder=&quot;Nome...&quot; /&gt;&lt;/td&gt;
              &lt;td&gt;&lt;input type=&quot;text&quot; name=&quot;costo&quot; value={this.state.costo} onChange={this.handleChange} placeholder=&quot;Costo unitario...&quot; /&gt;&lt;/td&gt;
              &lt;td&gt;&lt;input type=&quot;text&quot; name=&quot;quantita&quot; value={this.state.quantita} onChange={this.handleChange} placeholder=&quot;Quantità...&quot; /&gt;&lt;/td&gt;
              &lt;td className=&quot;total&quot;&gt;{this.state.totale}&lt;/td&gt;
          &lt;/tr&gt;
      )
  }}
  </code></pre>
  <p>AND THIS IS EXPORT CLASS</p>
  <pre><code>export default class Teste extends Component {
  constructor(props) {
      super(props);
      this.state = {
          counter: 2,
          lists: [
              {
                  id: &quot;0&quot;,
                  product: {
                      name: &quot;Example 1&quot;,
                      costo: &quot;20&quot;,
                      quantita: &quot;5&quot;
                  }
              },
              {
                  id: &quot;1&quot;,
                  product: {
                      name: &quot;Example 2&quot;,
                      costo: &quot;50&quot;,
                      quantita: &quot;2&quot;
                  }
              }
          ],
          totale: 0
      }
      this.addRow = this.addRow.bind(this)
      this.updateGlobalTotal = this.updateGlobalTotal.bind(this)
  }
  addRow() {
      this.setState({ counter: this.state.counter + 1 });
      var listItem = { id: this.state.counter, product: { name: &quot;&quot;, costo: &quot;&quot;, quantita: &quot;&quot; } };
      var allItem = this.state.lists.concat([listItem])
      this.setState({ lists: allItem });
  }
  updateGlobalTotal() {
      var total = 0;
      for (var i = 0; i &lt; this.state.counter; i++) {
          total += totalVec[i];
      }
      this.setState({ totale: total });
  }
  render() {
      return (
          &lt;div className=&quot;container&quot;&gt;
              &lt;div&gt;
                  &lt;h1&gt;Dynamic Table&lt;/h1&gt;
              &lt;/div&gt;
              &lt;div&gt;
                  &lt;table&gt;
                      &lt;tr&gt;
                          &lt;th&gt;Name&lt;/th&gt;
                          &lt;th&gt;Price&lt;/th&gt;
                          &lt;th&gt;Quantity&lt;/th&gt;
                          &lt;th&gt;Total&lt;/th&gt;
                      &lt;/tr&gt;
                      {this.state.lists.map((prodotto) =&gt;
                          &lt;ListItem key={prodotto.id} value={prodotto} updateGlobalTotal={this.updateGlobalTotal} /&gt;
                      )}
                      &lt;tr className=&quot;totalTr&quot;&gt;
                          &lt;td className=&quot;totalText&quot;&gt;Total:&lt;/td&gt;
                          &lt;td&gt;&lt;/td&gt;
                          &lt;td&gt;&lt;/td&gt;
                          &lt;td className=&quot;totalTR&quot;&gt;{this.state.totale}&lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/table&gt;
              &lt;/div&gt;
              &lt;div&gt;
                  &lt;button onClick={this.addRow}&gt;+&lt;/button&gt;
                  Add Product
              &lt;/div&gt;
          &lt;/div&gt;
      )
  }}
  </code></pre>
  <p>PROBLEM IS TO USE THIS</p>
  <pre><code>{this.state.lists.map((prodotto) =&gt;
                          &lt;ListItem key={prodotto.id} value={prodotto} updateGlobalTotal={this.updateGlobalTotal} /&gt;
                      )}
  </code></pre>
  <p>IN REACT HOOK.</p>