React smart view link

Hello,

I’m currently creating a smart view using the react builder, I wasn’t able to find examples to create links to the details of each record, how do you deal with this ?

I would like to wrap each expertise box into its link, my current code:

return (
      <div className='expertise-container'>
        {  
          records && records.map((record, i) => 
            <div key={record['forest-id']} className='expertise-box'>
              <h2>Expertise: {record['forest-mentorExpertiseType']['forest-value']}</h2>
              <div className='expertise-box__title'>{record['forest-title']}</div>
              <hr/>
              <div className='expertise-box__desc'>{record['forest-description']}</div>
            </div>
          )
        }
      </div>
    );

Thank you!

I also used the code here to create pagination however it’s not working with the following code, it keeps giving me the same page:

    const goNext = () => {
      if (currentPage < numberOfPages) {
        return fetchRecords({ page: currentPage + 1 })
      }
    };

Hi @Simon_BRAMI1,

There is an example here (what you shared actually). Just click on the React tab.

For the next page try this instead:

    const goNext = () => {
      if (currentPage < numberOfPages) {
        return fetchRecords({ currentPage: currentPage + 1 })
      }
    };

I renamed page to currentPage. Let me know if it works. It should if I’m not mistaken. I will correct it in the doc if so :pray:

1 Like

It works thanks !

Do you have any idea if it is possible while using a smart view inside a summary related data to keep the breadcrumb hierarchy when clicking the anchor tag ? Currently as I’m using an href like the example:

<a href={`/${baseUrl.join('/')}/${collection.id}/index/record/${collection.id}/${record.id}/details`}
    className="c-gallery__image-container"
    key={record.id}>

It fully reloads the page to the detail of this collection and I’m losing the breadcrumb of the previous collection. It’s not a big deal but not very convenient for ops.

Let me know if you have a solution for this :pray:

Thank you