We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Modern React - Hooks/Suspense

Thread ID:

Created:

Updated:

Platform:

Replies:

142135 Jan 21,2019 06:45 PM UTC Jul 13,2020 03:45 PM UTC React - EJ 2 6
loading
Tags: Grid
Ralf Haug
Asked On January 21, 2019 06:45 PM UTC

We plan on writing a modern React application and would like to leverage Syncfusion Web.
By modern I specifically refer to React Hooks -https://reactjs.org/docs/hooks-intro.html - and React Suspense -https://reactjs.org/docs/react-api.html#reactsuspense.
I understand that Syncfusion may not have support for it today yet, but will it architecturally be able to support it?

Jayakumar Duraisamy [Syncfusion]
Replied On January 22, 2019 01:07 PM UTC

Hi Ralf, 
Greetings from Syncfusion. 
Query 1: React Hooks 
We are analyzing the [“React Hooks”] requirement, we will update you the further details in two business days. 
Query 2: React Suspense  
Yes, our EJ2 component support for React Suspense architecture. 
Please let us know if you need further assistance on this.  
Regards, 
Jayakumar D 


Jayakumar Duraisamy [Syncfusion]
Replied On January 24, 2019 11:09 AM UTC

Hi Ralf, 

 
Please find the response for Query 1. 

 
React hooks are entirely different architecture that differs from the existing component based architecture and also not all the hooks in component life cycle are not implemented in the react hooks yet. However react team have ensured 
the backward compatibility in their article, our React components can be used with the hooks. 

 
Please let us know, if you need further assistance on this 

 
Regards, 
Jayakumar D 


Nikunj Panchal
Replied On September 10, 2019 11:59 PM UTC

Are React Hooks supported with Syncfusion React Dashboard layout?

Ashokkumar Balasubramanian [Syncfusion]
Replied On September 11, 2019 12:03 PM UTC

Hello Ralf, 
 
Yes, react hooks is supported for Syncfusion Dashboard layout component. We have prepared a simple sample using react hooks and attached below for your reference. In this sample, we have performed the increment and decrement operation using react hooks in a button click which is rendered inside the dashboard layout component. 
 
Refer to the below sample link. 
 
 
Please let us know, if you require any further assistance. 
 
Regards, 
Ashokkumar B. 


Cedeg
Replied On July 12, 2020 02:46 PM UTC

Hello,

I'm trying to use react-hooks in Detail Template of grid component but i get this error : 

Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

It seems we can't use hooks inside templates ?

Grid usage (in functional component):

<GridComponent  width="95%" dataSource={seances?.SeanceInfos}  detailTemplate={detailTemplate.bind(thisstagiaires)}>
        <ColumnsDirective>
        <ColumnDirective field='Id' headerText'Id' width='150' visible={false}/>
            <ColumnDirective  field="Date" headerText="Date de la séance info" width="110"></ColumnDirective>
            <ColumnDirective  field="SessionFormation.StartDate" headerText="Début de la formation" width="110"></ColumnDirective>
            <ColumnDirective  field="SessionFormation.EndDate" headerText="Fin de la formation" width="110"></ColumnDirective>
            <ColumnDirective  field="SessionFormation.Filiere.Name" headerText="Filière" width="110"></ColumnDirective>
           
        <Inject services={[GroupDetailRow]}/>
        </GridComponent> 

And template :

import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
import { useMutation } from '@apollo/react-hooks'
import gql from 'graphql-tag'
const ADD_STAGIAIRE_TO_SEANCE_MUTATION = gql`
  mutation addStagiaireToSeance($StagiaireId: Number!, $SeanceId: Number!) {
    createPost(StagiaireId: $title, SeanceId: $SeanceId) {
      id
    }
  }
`

const detailTemplate = (stagiaires,seance=> {
    const [addStagiaireToSeance, { loading }] = useMutation(ADD_STAGIAIRE_TO_SEANCE_MUTATION)
    function AddStagiaire (event){
        console.log(event);
        const stagiaireId = event.value;
        const seanceId = seance.Id;
        addStagiaireToSeance({
            variables: { stagiaireIdseanceId },
            update: (proxy, { data: { addStagiaireToSeance } })
        }
        )
    }
    function RemoveStagiaire(stagseance){
        console.log(stagseance);

    }
    return(
  <div className="grid grid-cols-2 gap-4">
    <div>
        <h4 className="text-md">Inscriptions</h4>
        <ul className="w-full max-w-md">
        {seance.StagiaireSeanceInfos.map((stagindex=> {
        return (
            <li key={index} className="p-4 mb-3 flex justify-between items-center bg-white shadow rounded-lg">
                <div className="flex items-center">
                    {stag.Stagiaire.Photo != null ?
                    (<img className="w-10 h-10 rounded-full" src={stag.Stagiaire.Photo} alt={stag.Stagiaire.Name}/>)
                    :
                    (<i className="w-10 h-10 fad fa-user fa-3x"></i>)
                    }
                    <p className="ml-2 text-gray-700 font-semibold font-sans tracking-wide">{stag.Stagiaire.FirstName + " " + stag.Stagiaire.Name}</p>

                </div>
                <div className="flex">
                    <button aria-label="Delete user" className="p-1 focus:outline-none focus:shadow-outline text-red-500 hover:text-red-600" click="RemoveStagiaire(seance)">
                        <i className="fad fa-trash-alt fa-2x"></i>
                    </button>
                </div>
            </li>
            )
        })}
        </ul>
    </div>

    <DropDownListComponent dataSource={stagiaires?.Stagiaires} fields={value: 'Id'text:'Name' }}  allowFiltering="true" id="stagiaires" change={AddStagiaire} placeholder="Chercher un stagiaire" ignoreAccent={true} cssClass="self-start" >
    </DropDownListComponent> 

  </div>
    )
    }
export default detailTemplate;

Manivel Sellamuthu [Syncfusion]
Replied On July 13, 2020 03:45 PM UTC

Hi Cedeg, 

Greetings from Syncfusion support. 

We can use hooks inside the templates of the Grid component. We have prepared sample that uses useState and suspense inside the template of the Grid component. Please refer the below sample for more information. 


Please let us know, if you need further assistance. 

Regards, 
Manivel 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon