title: Lambdas are forbidden in JSX attributes due to their rendering performance impact
body: <p>I have a code like this and I get an error:-</p>
  
  <pre><code>&lt;FieldArray
          name="amenities"
          render={arrayHelpers =&gt; (
            &lt;div&gt;
              {values.amenitieslist &amp;&amp; values.amenitieslist.length &gt; 0 ? (
                values.amenitieslist.map((amenity, index) =&gt; (
                  &lt;div key={index}&gt;
                    &lt;Field name={`amenitieslist.${index}.name`} /&gt;
                    &lt;button
                      type="button"
                      onClick={() =&gt; arrayHelpers.remove(index)} // remove a friend from the list
                    &gt;
                      -
                    &lt;/button&gt;
                  &lt;/div&gt;
                ))
              ) : (
                &lt;button type="button" onClick={() =&gt; arrayHelpers.push({ id: "", name: "" })}&gt;
                  {/* show this when user has removed all friends from the list */}
                  Add a friend
                &lt;/button&gt;
              )}
              &lt;div&gt;
                &lt;button type="submit"&gt;Submit&lt;/button&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          )}
        /&gt;
  </code></pre>
  
  <p>If I do this I get an error Lambdas are forbidden in JSX attributes due to their rendering performance impact.</p>
  
  <p>If I try moving to another method like this:-</p>
  
  <pre><code>const displayAmenities = (values, arrayHelper)=&gt;{
  }
  </code></pre>
  
  <p>I get an error that 'values' implicitly has an 'any' type.</p>
  
  <p>How do I work around this ??. I am not supposed to change any rules around lambda expressions. Is there a legitimate way of doing this.</p>