Converting GuineaPigs to Functional Components

Im trying to convert the GuineaPigs exercise into functional components. I have turned the GuineaPigs.js into a function component:

import React from 'react';

export const GuineaPigs = (props) => {

    return (
      <div>
        <h1>Cute Guinea Pigs</h1>
        <img src={props.src} />
      </div>
    );
}

For the GuineaPigsContainer I am slightly confused on how to reformat and pass the src prop down.

import { render } from '@testing-library/react';
import React, { useState, useEffect } from 'react';
import { GuineaPigs } from './GuineaPigs';

const GUINEAPATHS = [
  'https://content.codecademy.com/courses/React/react_photo-guineapig-1.jpg',
  'https://content.codecademy.com/courses/React/react_photo-guineapig-2.jpg',
  'https://content.codecademy.com/courses/React/react_photo-guineapig-3.jpg',
  'https://content.codecademy.com/courses/React/react_photo-guineapig-4.jpg'
];

export const GuineaPigsContainer = () => {
  const [currentGP, setCurrentGP] = useState(0);

  // const nextGP = () => {
  //   let current = currentGP;
  //   let next = ++current % GUINEAPATHS.length;
  //   setCurrentGP(next);
  // }

  useEffect(() => {
    const interval = setInterval(() => {
      let current = currentGP;
      let next = ++current % GUINEAPATHS.length;
      setCurrentGP(next);
    }, 5000)
    return () => clearInterval(interval);
  }, [currentGP])

  const src = GUINEAPATHS[currentGP];

  render(
    <GuineaPigs src={src} />
  )
}

This currently runs but it just shows a list of 5 GuineaPig pictures on the page and gives me errors in the console of “nothing was returned from render” and “render should be a pure function”.

Any help would be great.

Hi, render() is a function you need in class based components.

In a functional component you just need to return the component like

return  <GuineaPigs src={src} />