React-redux components as content for TabComponent

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,

Reply | Reply with quote

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.

<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 (

<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

Reply | Reply with quote

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

Reply | Reply with quote

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.

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

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

Regards,

Jayakumar D

Reply | Reply with quote

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:

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,

Reply | Reply with quote

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

Reply | Reply with quote

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

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US