Problem while creating Tab in react ERROR (2322)

Question

So... I am following this link for Tab creation
And got the error...

Type '{ children: Element; iconClassName: string; linkClassName: string; }' is not assignable to type 'IntrinsicAttributes & Props'. Property 'children' does not exist on type 'IntrinsicAttributes & Props'.ts(2322)

There are few issues here on stackoverflow kinda like this, but not very useful for me. Related files are...
Tab.tsx

import * as React from 'react';

export interface Props {
  onClick ?: Function;
  tabIndex ?: Number;
  isActive ?: Boolean;
  iconClassName: String;
  linkClassName: String;
 }

 function Tab ({
  onClick = function(){return; },
  tabIndex = 0,
  isActive = false,
  iconClassName = '',
  linkClassName = ''
  }: Props) {
  return (
      <li className="tab">
          <a 
              className={`tab-link ${linkClassName} ${isActive ? 'active' : ''}`}
              onClick={(event) => {
                  event.preventDefault();
                  onClick(tabIndex);
              }}
          >
              {linkClassName}
              <i className={`tab-icon ${iconClassName}`}/>
          </a>
      </li>
  );
}
export default Tab;

Tabs.tsx

import * as React from 'react';
  

export default class Tabs extends React.Component<any, any> {

    constructor(props: any, context: any) {
        super(props, context);
        this.state = {
            activeTabIndex: 0,
        };
        this.handleTabClick = this.handleTabClick.bind(this);
    }

    handleTabClick(tabIndex: number) {
        this.setState({
            activeTabIndex: tabIndex === this.state.activeTabIndex ? this.state.activeTabIndex : tabIndex
        });
    }

    // Encapsulate <Tabs/> component API as props for <Tab/> children
    renderChildrenWithTabsApiAsProps() {
        return React.Children.map(this.props.children, (child: any, index) => {
            return React.cloneElement(child, {
                onClick : this.handleTabClick,
                tabIndex: index,
                isActive: index === this.state.activeTabIndex
            });
        });
    }

    // Render current active tab content
    renderActiveTabContent() {         
        if (this.state.activeTabIndex !== undefined) {
            const {children} = this.props;
            const {activeTabIndex} = this.state;
            if (children != null) {
                if (children[activeTabIndex]) {
                    return children[activeTabIndex].props.children;
                }
            } else {
                console.dir('Error! This tab has no children!');
            }
        }
    }

    render() {
        return (
            <div className="tabs">
                <ul className="tabs-nav nav navbar-nav navbar-offices">
                    {this.renderChildrenWithTabsApiAsProps()}
                </ul>
                <div className="tabs-active-content">
                    {this.renderActiveTabContent()}
                </div>
            </div>
        );
    }
}

...and RenderTabs

class RenderTabs extends React.Component{
  render(){
    return(
      <div>
        <Tabs>
              <Tab iconClassName="" linkClassName="Tab1">
                  <div className="tab-content">
                      <h3>Elastacloud is great</h3>
                  </div>
              </Tab>
              <Tab iconClassName="" linkClassName="Tab2">
                  <div className="tab-content">
                      <p><a href="https://www.elastacloud.com" target="_blank">Check out Elastacloud the website</a></p>
                  </div>
              </Tab>
                    <Tab iconClassName="" linkClassName="Tab3">
                        <div className="tab-content">
                            <p>Seriously, Elastacloud also have some amazing blog posts</p>
                            <p><a href="http://channels.elastacloud.com" target="_blank">You should check those out too</a></p>
                        </div>
                    </Tab>
                </Tabs>
      </div>
    )
  }
}

CodeWorld CodeWorld · Accepted Answer · 2020-02-18T12:44:18

So I find out solution it is...
Adding children property under interface Props in Tab.tsx
Tab.tsx now has one additional property children:React.ReactNode;

export interface Props {
  onClick ?: Function;
  tabIndex ?: Number;
  isActive ?: Boolean;
  iconClassName: String;
  linkClassName: String;
  children: React.ReactNode;
 }

 function Tab ({
  onClick = function(){return; },
  tabIndex = 0,
  isActive = false,
  iconClassName = '',
  linkClassName = ''
  }: Props) {
  return (
      <li className="tab">
          <a 
              className={`tab-link ${linkClassName} ${isActive ? 'active' : ''}`}
              onClick={(event) => {
                  event.preventDefault();
                  onClick(tabIndex);
              }}
          >
              {linkClassName}
              <i className={`tab-icon ${iconClassName}`}/>
          </a>
      </li>
  );
}
export default Tab;

Problem while creating Tab in react ERROR (2322)

1 Answers