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. Image for the cookie policy date

React-redux components as content for TabComponent

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,

5 Replies

CI Christopher Issac Sunder K Syncfusion Team February 13, 2019 11:33 AM UTC

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 />; 
} 



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

Thanks,
Christo



TF TOKO FIDELE February 13, 2019 04:01 PM UTC

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



JD Jayakumar Duraisamy Syncfusion Team February 14, 2019 01:21 PM UTC

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.  
 
Please let us know, if have any concern on this. 
Regards, 
Jayakumar D 



TF TOKO FIDELE February 15, 2019 03:44 AM UTC

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


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 :



Thanks in advance and regards,


JD Jayakumar Duraisamy Syncfusion Team February 18, 2019 12:23 PM UTC

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 


Loader.
Live Chat Icon For mobile
Up arrow icon