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: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

React-redux components as content for TabComponent

Thread ID:

Created:

Updated:

Platform:

Replies:

142619 Feb 12,2019 02:14 PM UTC Feb 18,2019 12:23 PM UTC React - EJ 2 5
loading
Tags: General
TOKO FIDELE
Asked On February 12, 2019 02:20 PM UTC

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 [Syncfusion]
Replied On 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


TOKO FIDELE
Replied On 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


Jayakumar Duraisamy [Syncfusion]
Replied On 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 


TOKO FIDELE
Replied On 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,

Jayakumar Duraisamy [Syncfusion]
Replied On 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 


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

;