React Base Fiddle (JSX)

Starting point for creating JSFiddles with React.

HTML

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

Babel + JSX

const ProductForm = ({ data, index, products, setProducts }) => {
    
    const handleProductChange = (name, value) => {
      const allProducts = [...products];
      const selectedProduct = {...allProducts[index]};
      allProducts[index] = {
        ...selectedProduct,
        [name]: value
      };
      setProducts([ ...allProducts ]);
    }
    
    return (
      <li>
        <h2>{data.title}</h2>
        <label>Price:</label>
        <input type="text" value={products[index].price} onChange={(e) => handleProductChange('price', e.target.value)} />
      </li>
    );
  }

const App = () => {

	// List of products
	const [products, setProducts] = React.useState([
  {
  	title: 'My Product',
  },
  {
  	title: 'My Product 2',
  }
  ]);
  
  
  // Simple debug to track changes
  React.useEffect(() => {
  	console.log('PRODUCTS', products);
  }, [products]);
  
  return (
    <ul>
      {products.map((item, index) => 
         <ProductForm
           key={item.title}
           index={index}
           data={item}
           products={products}
           setProducts={setProducts}
         />
      )}
     </ul>;
}

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