I have a Tab component which is a part of tabs structure, but I need to convert it into React.FC. Here is the original and below is what I've done so far, but I'm getting lost around the onclick functionality.
import React, { Component } from 'react';
import PropTypes from 'prop-types';
class Tab extends Component {
static propTypes = {
activeTab: PropTypes.string.isRequired,
label: PropTypes.string.isRequired,
onClick: PropTypes.func.isRequired
};
onClick = () => {
const { label, onClick } = this.props;
onClick(label);
}
render() {
const {
onClick,
props: {
activeTab,
label
}
} = this;
let className = 'tab-list-item';
if (activeTab === label) {
className += ' tab-list-active';
}
return (
<li
className={className}
onClick={onClick}
>
{label}
</li>
);
}
}
export default Tab;
Here is my very bad attempt, which obviously is very bad
import React from 'react';
/**
* #function Tab
*/
const Tab: React.FC = () => {
type Props = {
activeTab: string;
label: string;
}
const onClick = (props) => {
const { label, onClick } = props;
onClick(label);
}
const {
onClick,
props: {
activeTab,
label
}
} = this;
let className = 'tab-list-item';
if (activeTab === label) {
className += ' tab-list-active';
}
return (
<li
className={className}
onClick={onClick}
>
{label}
</li>
);
}
export default Tab;
Any help would be much much appreciated, thank you!
If you are using typescript, you can define all the component props inside a type/interface and give it to the React.FC type, for example:
import React from 'react';
interface Props {
activeTab: string;
label: string;
onClick: (label: string) => void; // this means that the onClick param is a function that takes a label of type string as function parameter
}
// here we create a React functional component and we pass the Props interface to specify the component props
const Tab: React.FC<Props> = (props) => {
const handleOnClick = () => {
props.onClick(props.label)
}
let className = 'tab-list-item';
if (props.activeTab === props.label) {
className += 'tab-list-active';
}
return (
<li
className={className}
onClick={props.handleOnClick}
>
{props.label}
</li>
);
}
export default Tab;
If you know how to destructor an object you can clean your function in this way:
import React from 'react';
interface Props {
activeTab: string;
label: string;
onClick: (label: string) => void; // this means that the onClick param is a function that takes a label of type string as function parameter
}
// here we create a React functional component and we pass the Props interface to specify the component props
const Tab: React.FC<Props> = ({activeTab, label, onClick}) => {
const handleOnClick = () => {
onClick(label)
}
let className = 'tab-list-item';
if (props.activeTab === label) {
className += 'tab-list-active';
}
return (
<li
className={className}
onClick={handleOnClick}
>
{label}
</li>
);
}
export default Tab;
Related
I want to make my props be either type A, or B. For example
export default function App() {
type Checkbox = {
type: "checkbox";
checked: boolean;
};
type Dropdown = {
type: "dropdown";
options: Array<any>;
selectedOption: number;
};
type CheckboxOrDropdown = Checkbox | Dropdown;
const Component: FC<CheckboxOrDropdown> = (props) => {
return <>"...correct component"</>;
};
// these returns are just examples
return <Component type="checkbox" checked={true} />;
return <Component type="dropdown" options={[]} selectedOption={0} />;
}
Here's a fiddle
How can I achieve the same, but without the "type" prop? So that TS recognizes the type based on other props?
You can overload your component. By overloading here I mean intersection of two functional components:
import React, { FC } from 'react'
export default function App() {
type Checkbox = {
checked: boolean;
};
type Dropdown = {
options: Array<any>;
selectedOption: number;
};
const Component: FC<Checkbox> & FC<Dropdown> = (props) => {
return <>"...correct component"</>;
};
return [<Component checked={true} />, <Component options={[]} selectedOption={0} />];
}
This is the less verbose version I know.
If you have a lot of component types and you don't want to manually intersect them, you can use distributivity.
import React, { FC } from 'react'
export default function App() {
type Checkbox = {
checked: boolean;
};
type Dropdown = {
options: Array<any>;
selectedOption: number;
};
// credits goes to https://stackoverflow.com/a/50375286
type UnionToIntersection<U> = (U extends any ? (k: U) => void : never) extends (
k: infer I
) => void
? I
: never;
type Overload<T> = UnionToIntersection<T extends any ? FC<T> : never>
const Component: Overload<Checkbox | Dropdown> = (props) => {
return <>"...correct component"</>;
};
return [<Component checked={true} />, <Component options={[]} selectedOption={0} />];
}
Playground
I'm using ant calendar which renders PanelBody(third party) component which has a prop call rowNum. Now I want to override this value to my custom value from my component:
import React from 'react';
import { Calendar } from 'antd';
import moment from 'moment';
import { Button } from '#material-ui/core';
import { getEventInfo, getQuest } from '../../../response/api';
import { EventInfo, Event } from '../../../response/type';
import { ConfigProvider } from 'antd';
import jaJP from 'antd/lib/locale/ja_JP';
interface State {
event_infos: EventInfo[];
events: Event[];
}
interface Props {
}
class EventCalendar extends React.Component<Props, State> {
constructor(props: Props) {
super(props);
this.state = {
event_infos: [],
events: []
};
}
componentDidMount() {
getEventInfo().then((item) => {
this.setState({event_infos: item});
});
getQuest().then((item) => {
this.setState({events: item});
});
}
getCorrectFormatDate = date => {
return moment(date, 'YYYY-MM-DD').format('YYYY-MM-DD');
}
getListEventInfoDate = value => {
let listData = [];
let listEventInfo = this.state.event_infos;
listEventInfo.map((item) => {
const startTime = this.getCorrectFormatDate(item.start_at);
const calendarTime = this.getCorrectFormatDate(value);
if (startTime === calendarTime) {
listData.push(item);
}
return listData;
});
return listData || [];
}
getListEventDate = value => {
let listData = [];
let listEvent = this.state.events;
listEvent.map((item) => {
const startTime = this.getCorrectFormatDate(item.start_at);
const calendarTime = this.getCorrectFormatDate(value);
if (startTime === calendarTime) {
listData.push(item);
}
return listData;
});
return listData || [];
}
dateCellRender = value =>{
const listEventInfos = this.getListEventInfoDate(value);
const listEvents = this.getListEventDate(value)
return (
<ul className="events-calendar">
{listEventInfos.map((item, i) => <img key={i} src={item.image} alt="event_info" />)}
{listEvents.map((item, i) => <Button key={i} variant="outlined" color="primary" className="button-event">{item.name}</Button>)}
</ul>
)
}
render() {
moment.locale("ja");
return(
<ConfigProvider locale={jaJP}>
<Calendar
dateCellRender={this.dateCellRender}
className="hide-header"
validRange={[moment('2020-12-13', 'YYYY-MM-DD'), moment('2021-01-16', 'YYYY-MM-DD')]}
defaultValue={moment('2020-12-13')}
/>
</ConfigProvider>
)
}
};
export default EventCalendar;
This component render Calendar which renders PanelBody. I tried to create a duplicated component then overrided the prop value, imported it to EventCalendar, but it cannot update the props value as expected. Is it my approach wrong? Any suggestion for this issue?
I want to call a child functional component's method from a parent functional component. I've created useRef and put it via props to the child component. I've wrapped the child component with forwardRef. But I get an undefined ref.
Also, I have no way to put the ref to the dom element (only to functional component).
The parent component:
import Tree from '#c-tree'
import React, {
FunctionComponent,
useEffect,
useState,
useContext,
useRef,
} from 'react';
const NavTree: FunctionComponent = () => {
const refTree = useRef();
useEffect(() => {
if (refTree !== undefined && refTree.current !== undefined) {
// #ts-ignore
console.log(refTree.current.handleCurrentSelected);
}
// eslint-disable-next-line
}, [refTree]);
const tree = () => {
if (d?.items) {
return (
<Tree ref={refTree}>
{d.items.map(s => (
<Tree.Asset
key={s.id}
name={s.name}
dataSelected={`${s.id}`}
item={{
name: s.name,
tenantID: s.id,
type: s?.tree?.name,
children: [],
}}
/>
))}
</Tree>
);
}
};
return (
<SideBar
title={title}
>
<Box display="flex" flexDirection="column" height="100%">
<StyledBox>{tree()}</StyledBox>
</Box>
**</SideBar>
);
};
export default NavTree;
The child component:
import React, { useImperativeHandle, useState, ForwardRefExoticComponent, forwardRef, PropsWithRef } from 'react';
import TreeContext from './treeContext';
import TreeGroup from './components/TreeGroup';
import TreeEntity from './components/TreeEntity';
interface TabsStatic {
Group: typeof TreeGroup;
Asset: typeof TreeEntity;
}
type TabsComponent = ForwardRefExoticComponent<PropsWithRef<ITreeProps>> & TabsStatic;
interface ITreeProps {
data?: {
type: string;
name: string;
tenantID: number;
children?: Array<Object>;
}[];
ref?: any;
}
export const Tree = forwardRef(({
data,
}: ITreeProps, ref) => {
const [contextValues, setContextValues] = useState({
selected: null,
opened: {},
});
useImperativeHandle(ref, () => (
{
handleCurrentSelected: (selectedName: string) => {
setContextValues({
...contextValues,
selected: selectedName,
opened: {
...contextValues.opened,
[selectedName]: !contextValues.opened[selectedName] || false,
},
});
}}
));
return (
<TreeContext.Provider value={contextValues}>
{
React.Children.map(children, child => {
return React.cloneElement(child, childrenProps);
})
}
</TreeContext.Provider>
);
}) as TabsComponent;
Tree.Group = TreeGroup;
Tree.Asset = TreeEntity;
export default Tree;
UPDATED
I can get useRef.current value after re-rendering. How can I get a useRef current (not previous) value?
I have a parent component ProductTest that holds state as the source of truth. The state is an array of variant items. Each item is simplified for this example and has a title.
When a Variant's title is updated, the child will call it's handler callback via the prop passed by the parent. The parent then updates state, and the child will then have a new title property.
What I am seeing is that the child's componentWillReceiveProps function will display the same value for this.props and nextProps. I would think that since the value is supplied by the parent, the two would be different.
I'm not sure what I'm doing incorrectly.
Here is the parent ProductTest component:
import React, { Component } from 'react'
import { connect } from 'react-redux'
import axios from 'axios'
import Variant from './variants/Variant'
import { REACT_APP_API_URL, REACT_APP_SITE_KEY } from '../../../shared/vars'
import '../../../css/variants.css'
class ProductTest extends Component {
constructor(props) {
super(props)
this.state = {
variants: []
}
this.handleVariantTitleChange = this.handleVariantTitleChange.bind(this)
this.handleVariantValueChange = this.handleVariantValueChange.bind(this)
}
componentDidMount() {
this.loadData()
}
loadData() {
const apiEndpoint = 'products/some-product'
const AUTH_HEADER = { Authorization: REACT_APP_SITE_KEY }
return axios.get(REACT_APP_API_URL + apiEndpoint, { headers: AUTH_HEADER })
.then((response) => {
this.setState({ variants: response.data.product.variants })
})
.catch((err) => {
console.log("YA GOOFED BUD!", err)
})
}
handleVariantTitleChange(e, i) {
let { variants } = this.state
const { value } = e.target
variants = variants.map((item, index) => {
item.title = i === index ? value : item.title
return item
})
this.setState({ variants })
}
handleVariantValueChange(e, id) {
let { variants } = this.state
const { value } = e.target
variants = variants.map(variant => {
variant.items = variant.items.map(item => {
item.title = id === item.id ? value : item.title
return item
})
return variant
})
this.setState({ variants })
}
render() {
return (
<div>
{this.state.variants.map((variant, i) => {
return <Variant key={i}
variant={variant}
index={i}
changeVariantTitle={this.handleVariantTitleChange}
changeVariantValue={this.handleVariantValueChange}
/>
})}
</div>
)
}
}
export default ProductTest
Here is the child Variant component:
import React, { Component } from 'react'
class Variant extends Component {
componentWillReceiveProps(nextProps){
console.log(this.props, nextProps)
}
render() {
const { variant, index } = this.props
return (
<div className="variant-wrapper" data-new="new_value">
<div className="ajax-error" data-hbs-id="{{id}}"></div>
<div className="varient-item-titles">
<div className="variant-item-title">
Title
</div>
<div className="varient-attribute-titles">
<div className="variant-attribute">Value</div>
</div>
</div>
<div className="variant-item-content">
<div className="variant-label">
<input type="text" name="variant_label" value={variant.title} placeholder="Size, colour, etc."
onChange={e => this.props.changeVariantTitle(e, index)}
/>
</div>
</div>
</div>
)
}
}
export default Variant
Before
After
Console.log()
These two objects are this.props and nextProps. Notice the title property is not different, as I'd expect them to be.
SOLUTION!
The reason for all of those is that I was not correctly altering the parent's state immutably. I think I was just changing the value at the same memory address, and hence by the time it got to the componentWillReceiveProps it was already the new value. I think...
I found that the following will work:
handleVariantTitleChange(e, i){
const { value } = e.target
// Immutably clone specific variant item
let variant = Object.assign({}, this.state.data.variants[i])
// Set new title to item
variant.title = value
// Set the variant to the cloned item
let variants = this.state.data.variants
variants[i] = variant
this.setState({
data: {
...this.state.data,
variants
}
})
}
In my app, I'm trying to use Popper to create a tooltip over every element in the app.
(Usually, I would only show a single tooltip, but for a presentation I want to show more than one).
I wrote this utility Component to attach tooltip directly to ref.
It works pretty well, but when I try to use it inside an [].map() like regular react components, I lose all my positioning:
https://bit.dev/bit/base/atoms/ref-tooltip?example=5e81d946443f4900195606b7
import React, { Component } from 'react';
import { RefTooltip } from '#bit/bit.base.atoms.ref-tooltip'
export default class ExampleUsage extends Component {
state = { ref: [] };
handleRef = (elem) => {
if (this.state.ref.some(x => x === elem)) return;
this.setState({ ref: [elem] });
}
render() {
return (
<div>
<span ref={this.handleRef}>target</span>
{ /*
* (!)
* This .map() breaks tooltip
*
*/ }
{this.state.ref.map((elem, idx) => (
<RefTooltip key={idx} targetElement={elem}>
"tooltip"
</RefTooltip>
))}
</div>
);
}
}
//ref-tooltip.tsx
import React, { Component } from 'react';
import classNames from 'classnames';
//#ts-ignore
import createRef from 'react-create-ref';
import { createPopper, Instance, Options } from '#popperjs/core';
import styles from './ref-tooltip.module.scss';
export type RefTooltipProps = {
targetElement?: HTMLElement;
popperOptions?: Partial<Options>;
} & React.HTMLAttributes<HTMLDivElement>;
export class RefTooltip extends Component<RefTooltipProps> {
private ref = createRef();
private popperInstance?: Instance;
componentWillUnmount() {
this.destroy();
}
componentDidUpdate(prevProps: RefTooltipProps) {
const nextProps = this.props;
if (prevProps.targetElement !== nextProps.targetElement) {
this.reposition(nextProps.targetElement);
}
}
private reposition = (targetElement?: HTMLElement) => {
const { popperOptions = popperDefaultOptions } = this.props;
const popperElement = this.ref.current;
if (!targetElement) {
this.destroy();
}
if (!targetElement || !popperElement) return;
this.popperInstance = createPopper(targetElement, popperElement, popperOptions);
};
private destroy() {
if (!this.popperInstance) return;
this.popperInstance.destroy();
this.popperInstance = undefined;
}
render() {
const { className, targetElement, ...rest } = this.props;
return (
<div
{...rest}
ref={this.ref}
className={classNames(styles.tooltipWrapper, className)}
data-ignore-component-highlight
/>
);
}
}
const popperDefaultOptions: Partial<Options> = {
placement: 'top',
modifiers: [
{
name: 'flip',
enabled: false,
},
],
};
Expected:
Actual:
I don't understand why the .map() breaks popper. At least for an array of 1, it should behave the same.
Any ideas why this isn't working?