const User = ({ fruit }) => {
  return <div>{fruit} in user.jsx</div>;
};

export default User;

export default FruitApp;

import './index.css';
import { useState, useEffect } from 'react';
import axios from 'axios';
import User from "./user";

function App() {
  const [count, setCount] = useState(0);
  const [array, setArray] = useState([]);

  const fetchApi = async () => {
    try {
      const response = await axios.get("http://localhost:3000/api");
      setArray(response.data.fruits);
      console.log(response.data.fruits);
    } catch (error) {
      console.error("Erreur lors de la récupération des données : ", error);
    }
  };

  useEffect(() => {
    fetchApi();
  }, []);

  return (
    <div>
      {array.map((fruit, index) => (
        <User key={index} fruit={fruit}></User>
      ))}
    </div>
  );
}

export default App;