How to skip a particular index from a loop if a condition is truthy in React?

Question

I have an array of blogs coming from a CMS which renders out a blog page with images/content etc.

At the bottom of this blog page, I then suggest 2 other blogs for the user to checkout from the list of blogs in the array.

Quite simply, I want to choose 2 blogs from the array at random but ensure that one of them is NOT the current blog page that I'm on, I am close to achieving this but can't quite get it right using a for loop within a useEffect.

I thought I could check the uid of the blog post and if it matches the current url endpoint, skip over it using next & prev from state as the index of the array.

This is my react file:

export default function Case({ data, cases }) {
  const [next, setNext] = useState(0);
  const [prev, setPrev] = useState(0);

  const { results } = cases;
  console.log(results);

  useEffect(() => {
    let currentUrl = window.location.pathname;
    currentUrl = currentUrl.split('/')[2];
    console.log(currentUrl);

    for (let i = 0; i < results.length; i++) {
      if (results[i].uid === currentUrl) {
         // how to solve here?

      }
    }
  }, []);

  return (
    <div className='h-full w-full bg-white'>
      <div className='bg-gray-100'>
        <div className='max-w-5xl mx-auto bg-white py-20 -mt-16 rounded-lg shadow-lg px-8 z-10 relative'>
          <div className='flex flex-col md:flex-row justify-around md:space-x-36'>
            <div className=''>
              <p className='text-3xl text-left'>
                {RichText.asText(data.client)}
              </p>
              <p className='text-xl text-left font-light mt-6'>
                {RichText.asText(data.title)}
              </p>
            </div>
            <div className='md:w-1/3 flex flex-col justify-between mt-6 md:mt-0'>
              <p className='text-3xl text-blue-500 text-left'>
                {RichText.asText(data.overview)}
              </p>
              <div className='flex space-x-28 items-start mt-8 md:mt-20'>
                <div>
                  <p className='text-xl font-bold'>Category</p>
                  <p className='mt-8'>{RichText.asText(data.category)}</p>
                </div>
                <div>
                  <p className='text-xl font-bold'>Date</p>
                  <p className='mt-8 whitespace-nowrap'>
                    {moment(data.date).format('MMM YYYY')}
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div>
          <p className='text-3xl text-center'>Want to learn more?</p>
          <p className='text-2xl font-light text-center mt-4'>
            Check out our other solutions!
          </p>
        </div>
      <div
        className='bg-white w-full relative flex justify-center'
        style={{ height: '70vh' }}>
        <div className='absolute -top-1/3 flex flex-col md:flex-row gap-6'>
          <div className='text-center px-8 md:px-0'>
            <Link href={`/case-studies/${results[next].uid}`}>
              <button className='py-2 px-6 rounded-md bg-blue-500 text-white mt-8'>
                {' '}
                Read more
              </button>
            </Link>
          </div>

          <div className='text-center px-8 md:px-0'>
            <Link href={`/case-studies/${results[prev].uid}`}>
              <button className='py-2 px-6 rounded-md bg-blue-500 text-white mt-8'>
                Read more
              </button>
            </Link>
          </div>
        </div>
      </div>
    </div>
  );
}

I'm sure its quite simple but any help would be greatly appreciated!

Thanks in advance.

Answer 1

I'm not sure, if the uid and currentUrl are the correct properties to compare, but you need to filter the results and it would be better to make a use of js es6 array methods.
At least the logic can help you to understand.
Also, I'm not sure, that you need useEffect.

 const { results } = cases;
  console.log(results);

 
    let currentUrl = window.location.pathname;
    currentUrl = currentUrl.split('/')[2];
    console.log(currentUrl);

const filteredResults = results && results.filter(result=>result.uid !== currentUrl)