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.

CodePudding user response：

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)