How do I use a loop for props in React?

I have a component that fetches some data from a backend and displays it. The model in the backend cannot be changed. It has got an allowance for a max of 5 images and all separate fields. I wrote a code for displaying based on value (if existent or not) but I am wondering if this code can be written in fewer lines. I am pretty much talking about the if statement. I have tried a loop but maybe I ma not good enough. Appreciate

const Post = () => {
    const { id } = useParams();
    const [post, setPost] = useState('');
    const [author, setAuthor] =useState('');
 

    useEffect(() => {
      axios.get('http://localhost:8000/posts/' + id)
      .then((response) => {
        setPost(response.data);
      })
    }, [id]
      

    let images = (<div className="imagesCard"><img src={post.main_image} class="card-img-top" alt="..." /></div>);
    if(post.image_2 !== null){
      images = (
      <>
      <div className="imagesCard"><img src={post.main_image} class="card-img-top" alt="..." /></div>
      <div className="imagesCard"><img src={post.image_2} class="card-img-top" alt="..." /></div>
      </>
      );
      if(post.image_3 !== null){
        images = (
          <>
          <div className="imagesCard"><img src={post.main_image} class="card-img-top" alt="..." /></div>
          <div className="imagesCard"><img src={post.image_2} class="card-img-top" alt="..." /></div>
          <div className="imagesCard"><img src={post.image_3} class="card-img-top" alt="..." /></div>
          </>
        );
        if(post.image_4 !== null){
          images = (
            <>
              <div className="imagesCard"><img src={post.main_image} class="card-img-top" alt="..." /></div>
              <div className="imagesCard"><img src={post.image_2} class="card-img-top" alt="..." /></div>
              <div className="imagesCard"><img src={post.image_3} class="card-img-top" alt="..." /></div>
              <div className="imagesCard"><img src={post.image_4} class="card-img-top" alt="..." /></div>
            </>
          );
          if(post.image_5 !== null){
            images = (
              <>
              <div className="imagesCard"><img src={post.main_image} class="card-img-top" alt="..." /></div>
              <div className="imagesCard"><img src={post.image_2} class="card-img-top" alt="..." /></div>
              <div className="imagesCard"><img src={post.image_3} class="card-img-top" alt="..." /></div>
              <div className="imagesCard"><img src={post.image_4} class="card-img-top" alt="..." /></div>
              <div className="imagesCard"><img src={post.image_5} class="card-img-top" alt="..." /></div>
              </>
            )
          }
        }
      }
    } 
    return (
      <div class="card col-5 detailCard">
          <Carousel 
          responsive={responsive}
          swipeable={true}
          showDots={true}
          >
          {images}         
          </Carousel>          
        <div class="card-body">
          <h5 class="card-title">{post.title}</h5>
          <p class="card-text">{post.content}</p>
          <figcaption class="blockquote-footer card-text">
            {author.name}
          </figcaption>
        </div>
      </div>
    );
  };

Answer

Ideally, make an array of images instead. Change your backend to, instead of having

{
  main_image: <src>,
  image_2: <src>,
  image_3: <src>,
}

to instead serve in response

[
  <src>, // main image
  <src>, // what used to be "image_2"
  <src>, // what used to be "image_3"
  // etc
]

where nonexistent srcs are not included in the array (that is, they aren’t null, they just aren’t present). Then, you’ll be able to do

const [posts, setPosts] = useState([]);
// ...
const images = posts.map(src => (
  <div className="imagesCard"><img src={baseUrl + src} class="card-img-top" alt="..." /></div>
));

If you can’t change the backend (which you really really should – it’s horribly designed at the moment – but if it’s completely impossible), then parse the response into an array on the client side.

const properties = ['main_image', 'image_2', 'image_3', 'image_4', 'image_5'];
const parseResponse = response => properties
  .map(prop => response[prop])
  .filter(Boolean);

and then call setPosts(parseResponse(response)).