React-redux components as content for TabComponent

[TOKO FIDELE]

the content property of TabItemDirective only allows a string (html code or element id) and React components. Is it possible to add a React component that connects to the store to update its state and rendering, either via TabItemDirective or the addTab method ?

Thanks in advance and regards,

[Christopher Issac Sunder K]

Hi Toko,  

Thanks for contacting Syncfusion support. 

Yes, it is possible to add the React-redux components as content for our TabComponent. As our Tab content have React Template support, we can render any component as its contents. Please find the below code snippet for more reference. 

<TabComponent heightAdjustMode="Auto" id="tabelement"> 

    <TabItemsDirective> 

        <TabItemDirective header={headertext[0]} 

                            content={contentTemplate1} /> 

        <TabItemDirective header={headertext[1]} 

                            content={contentTemplate2} /> 

    </TabItemsDirective> 

</TabComponent> 

 

// give the store component to your Tab item content template function 

function contentTemplate1() { 

    return ( 

        <Provider store={store}> 

            <App /> 

        </Provider> 

    ); 

} 

function contentTemplate2() { 

    return  <CalendarComponent />; 

} 

Demo Link: https://codesandbox.io/s/5yko93847l 

UG Link: https://ej2.syncfusion.com/react/documentation/tab/how-to/render-other-components-in-tab-using-template/?no-cache=1 

Please check the above shared sample details and let us know if you need any further assistance. 

Thanks,
Christo

[TOKO FIDELE]

thank you very much for your prompt response, I am delighted for this answer but I meet another problem with my component User === App (in your example of answer). when I wrap my User component in the provider with the store as shown in the response example, I can not retrieve the value of the props of my User component in the store when they change. when the store is updated, my User component is supposed to update with the new store values, except that the User component is rendered but its props are not updated, they keep the value of the first load of the store. page.

Please help me find out why the props on my User component stay empty each time they change in the store. I add the statement store.dispatch (changeLanguage (lang)); and everything works, however I would not want to add this instruction seen in the answer example

const store = createStore(reducer, applyMiddleware(...middleware));

store.dispatch(getAllProducts());

export class Default extends SampleBase {

render() {

let headertext: any;

function contentTemplate1() {

return (

<Provider store={store}>

<App />

Provider>

);

}

Thanks in advance and regards,

below the excerpts from my code. 

profileTabs.js

import React from "react";

import _ from "underscore";

import { connect } from "react-redux";

import LanguageList from "../../../../components/languageSelector/languageList";

import { DatePickerComponent } from "@syncfusion/ej2-react-calendars";

import { _sampleBase } from "../sampleBase";

class USer extends _sampleBase {

constructor(props) {

super(props);

//get current language from store

this.lang = this.props.language; // the value does not change in spite of its update in the store

//get language list: ["en", "fr"]

this.languagesList = Object.keys(LanguageList);

// if language is equal to en datepicker laocal is english, vice versa

this.datePickerLocale = _.isEqual(this.lang, this.languagesList[0])

? this.languagesList[0]

: this.languagesList[1];

}

render() {

console.log("========language========", this.props.language); // the value does not change in spite of its update in the store

return (

<div>

<div className="identity">

<label className="identity-label">Identificationlabel>

<div className="identity-form">

<div className="form-fields">

<div className="birth-date">

<DatePickerComponent

format="dd-MM-yyyy"

placeholder="Date de naissance"

floatLabelType="Auto"

strictMode="true"

cssClass="wh-custom-calendar"

locale={this.datePickerLocale}

/>

div>

div>

{/* end form fields*/}

div>

{/* end identity form */}

div>

div>

);

}

}

const mapStateToProps = state => ({

// get language

language: state.languageReducer.language

});

export default connect(mapStateToProps)(USer);

User.js

[Jayakumar Duraisamy]

Hi Toko,  

 

We have checked the reported issue in our side and we could not reproduce the issue. We request you to modify the sample given to you for reproducing the same in our end or if possible share your demo sample. It will helpful for us to serve you better.  

Sample: https://codesandbox.io/s/5yko93847l  

 

Please let us know, if have any concern on this. 

Regards, 

Jayakumar D 

[TOKO FIDELE]

Hello.

thanks for your reply Jayakumar Duraisamy, in front of my problem I leave this link where I find my solution:

https://stackblitz.com/edit/react-ts-nyausa?file=tab.tsx

the problem should come from the itemsDirectives present in the. 

however, I have another question. how do i get the style of the input email or password present in your login form at :

https://www.syncfusion.com/account/login

Thanks in advance and regards,

[Jayakumar Duraisamy]

Hi TOKO, 

Thanks for the update. 

 

For input email/password in our login form, we have used our own custom styles and bootstrap styles. 

 

Please let us know, if you need further assistance. 

Regards, 

Jayakumar D