I see this link but didn't get any answer for my question
in my component , I have a two selectbox and one txtarea that owned Specified state(define by use state).
so on click add button this form create again and again,
my question is how to define new state dynamicly to set it for new selectbox that dynamicly created.
my select box use react-select and code of them is here :
<div className="mqContainer">
{[...Array(mqCount)].map((x, i) => (
<div key={i} className="newMqWrapper mt-4">
<Row className="mt-4">
<Col xs={3}>
<span>milestone</span>
</Col>
<Col xs={6}>
<Select
style={{ width: "100px !important" }}
defaultValue={mileStoneType}
onChange={setmileStoneType}
options={MileStoneTypeOption}
isMulti={true}
/>{" "}
</Col>
</Row>
<Row className="mt-4">
<Col xs={3}>
<span>question text</span>
</Col>
<Col xs={8}>
<Form.Group>
<Form.Control
placeholder="why so serious?"
className=" dirrtl"
as="textarea"
rows={3}
/>
</Form.Group>{" "}
</Col>
</Row>
<Row className="mt-4">
<Col xs={3}>
<span>answer type</span>
</Col>
<Col xs={6} className="mb-4">
<Select
defaultValue={mileStoneAnswerType}
onChange={setmileStoneAnswerType}
options={MqAnswerTypeOption}
/>{" "}
</Col>
</Row>
</div>
))}
<Row>
<Col xs={12} className=" mb-4 mt-4">
<Button
onClick={() => setMqCount(mqCount + 1)}
style={{ width: "100%" }}
variant="outline-secondary"
>
+
</Button>{" "}
</Col>
</Row>
</div>
I hope that I understand your problem correctly.
Regularly, you would create a Component in which you can call useState() separately. After that, you can render it inside your map().
I tried to reproduce your structure:
import { useState } from 'react'
const Form = () => {
const [ mqCount, setMqCount ] = useState(0)
return (
<div className='mqContainer'>
{[ ...Array(mqCount) ].map((x, i) => {
// TODO: pass your required props here
return <Item key={i} />
})}
<Row>
<Col className='mb-4 mt-4' xs={12}>
<Button
style={{ width: '100%' }}
variant='outline-secondary'
onClick={() => setMqCount(mqCount + 1)}
>
+
</Button>{' '}
</Col>
</Row>
</div>
)
}
const Item = ({ mileStoneType, MileStoneTypeOption, setmileStoneType }) => {
const [ yourState, setYourState ] = useState('Whatever you want')
// TODO: replace it with your own state
return (
<div key={i} className='newMqWrapper mt-4'>
<Row className='mt-4'>
<Col xs={3}>
<span>milestone</span>
</Col>
<Col xs={6}>
<Select
isMulti
defaultValue={mileStoneType}
options={MileStoneTypeOption}
style={{ width: '100px !important' }}
onChange={setmileStoneType}
/>{' '}
</Col>
</Row>
<Row className='mt-4'>
<Col xs={3}>
<span>question text</span>
</Col>
<Col xs={8}>
<Form.Group>
<Form.Control
as='textarea'
className=' dirrtl'
placeholder='why so serious?'
rows={3}
/>
</Form.Group>{' '}
</Col>
</Row>
<Row className='mt-4'>
<Col xs={3}>
<span>answer type</span>
</Col>
<Col className='mb-4' xs={6}>
<Select
defaultValue={mileStoneAnswerType}
options={MqAnswerTypeOption}
onChange={setmileStoneAnswerType}
/>{' '}
</Col>
</Row>
</div>
)
}
Related
I am new to Typescript and working on a project started by someone else. Is this a version issue or some other issue with the code? I am using Node version v14.19.11. Although the application loads but the page doesn't work on edit/click text fields.
Code
import React from "react";
import { Table, Row, Col, Spinner, Button, Card, CardHeader, CardBody, FormGroup, Label, Input, Alert } from "reactstrap";
import Moment from "react-moment";
import { Asset } from "./api/platform-assets-api";
import AttributeEditForm from './forms/AttributeEditForm';
import AttributeListComponent from './AttributeListComponent';
export const AssetDetailComponent = ({ data, handlers, lastActionStatus }) => {
console.log(data);
const asset: Asset = data;
const error = '';
const addAttrProps = { currentAttrs: asset && asset.details, handleAction: handlers.handleAddAttr };
const attrListProps = { currentAttrs: asset && asset.details, handleAction: handlers.handleDeleteAttr };
return (
<div className="animated fadeIn">
<Row>
<Col>{error}</Col>
</Row>
<Row>
<Col></Col>
<Col>
</Col>
<Col>
<div className="mb-3 float-right">
<Button color="secondary" className="mr-2">
<span>
<i className={"fa fa-refresh"} />
</span>
</Button>
<Button color={"primary"} onClick={handlers.handleOnboard}>
Start onboarding...
</Button>
<Button className="ml-2" color={"primary"} onClick={handlers.handleEdit}>
Edit
</Button>
<Button className="ml-2" color={"primary"} onClick={handlers.handleClone}>
Clone
</Button>
<Button className="ml-2" color={"primary"} onClick={handlers.handleDelete}>
Delete
</Button>
</div>
</Col>
</Row>
<Row>
<Col xs={12}>
<Card>
<CardHeader>
<i className="fa fa-info" />
<strong>{asset && asset.name}</strong> (Id:{" "}
{asset && asset.id})
</CardHeader>
<CardBody>
<Row className="pt-3">
<Col
sm={4}
className="border border border-top-0 border-bottom-0 border-left-0"
>
<dt>Description</dt>
<dd>
{asset && asset.description}
</dd>
</Col>
<Col
sm={4}
className="border border border-top-0 border-bottom-0 border-left-0"
>
<dt>Active</dt>
<dd>
{asset && asset.status}
</dd>
</Col>
<Col sm={4}>
<dt>Created</dt>
<dd>
{asset && asset.createdAt}
</dd>
<dt>Updated</dt>
<dd>
{asset && asset.updatedAt}
</dd>
</Col>
</Row>
<Row>
<Col sm={12}>
<p>{lastActionStatus}</p>
</Col>
</Row>
</CardBody>
</Card>
</Col>
</Row>
<Row>
<Col xs={12}>
<AttributeEditForm {...addAttrProps} />
</Col>
</Row>
<Row>
<Col xs={12}>
<AttributeListComponent {...attrListProps} />
</Col>
</Row>
</div>
);
};
When I do a yarn start I end up with the below Error however the page loads fine at http://localhost:3000/ although the text-fields are not clickable and data couldn't be entered.
Error Observed
Failed to compile.
/Users/roy.pk/platan-cac/src/platform/AssetDetailComponent.tsx
TypeScript error in /Users/ranopriyo.neogy/platan-cac/src/platform/AssetDetailComponent.tsx(16,14):
'Row' cannot be used as a JSX component.
Its instance type 'Row' is not a valid JSX element. TS2786
14 | return (
15 | <div className="animated fadeIn">
> 16 | <Row>
| ^
17 | <Col>{error}</Col>
18 | </Row>
19 | <Row>
'Container' cannot be used as a JSX component.
Its instance type 'Container' is not a valid JSX element.
import React from 'react'
import { Link } from 'react-router-dom'
import { Row, Col, Image, ListGroup, Button, Card } from 'react-bootstrap'
import Rating from '../components/Rating'
import products from '../products'
function ProductScreen({ match }) {
const product = products.find((p) => p._id === match.params.id)
return (
<div>
<Link to='/' className='btn btn-light my-3'>Go Back</Link>
<Row>
<Col md={6}>
<Image src={product.image} alt={product.name} fluid />
</Col>
<Col md={3}>
<ListGroup variant="flush">
<ListGroup.Item>
<h3>{product.name}</h3>
</ListGroup.Item>
<ListGroup.Item>
<Rating value={product.rating} text={'${product.numReviews} reviews'} color={'#f8e825'} ></Rating>
</ListGroup.Item>
<ListGroup.Item>
Price: ₹{product.price}
</ListGroup.Item>
<ListGroup.Item>
Description: {product.description}
</ListGroup.Item>
</ListGroup>
</Col>
<Col md={3}>
<Card>
<ListGroup variant="flush">
<ListGroup.Item>
<Row>
<Col>Price:</Col>
<Col>
<strong>{product.price}</strong>
</Col>
</Row>
</ListGroup.Item>
<ListGroup.Item>
<Row>
<Col>Status:</Col>
<Col>
{product.countInStok > 0 ? 'In Stock' : 'Out of Stock'}
</Col>
</Row>
</ListGroup.Item>
<ListGroup.Item>
<Button className='btn-block' type='button'> add to Cart </Button>
</ListGroup.Item>
</ListGroup>
</Card>
</Col>
</Row>
</div>
);
}
export default ProductScreen
enter image description here
product is undefined so you can't read any properties of it. to prevent happening error check the value of it before render:
if(!product)
return <></>
return (
<div>
<Link to='/' className='btn btn-light my-3'>Go Back</Link>
<Row>
<Col md={6}>
<Image src={product.image} alt={product.name} fluid />
</Col>
<Col md={3}>
<ListGroup variant="flush">
<ListGroup.Item>
<h3>{product.name}</h3>
</ListGroup.Item>
<ListGroup.Item>
<Rating value={product.rating} text={'${product.numReviews} reviews'} color={'#f8e825'} ></Rating>
</ListGroup.Item>
<ListGroup.Item>
Price: ₹{product.price}
</ListGroup.Item>
<ListGroup.Item>
Description: {product.description}
</ListGroup.Item>
</ListGroup>
</Col>
<Col md={3}>
<Card>
<ListGroup variant="flush">
<ListGroup.Item>
<Row>
<Col>Price:</Col>
<Col>
<strong>{product.price}</strong>
</Col>
</Row>
</ListGroup.Item>
<ListGroup.Item>
<Row>
<Col>Status:</Col>
<Col>
{product.countInStok > 0 ? 'In Stock' : 'Out of Stock'}
</Col>
</Row>
</ListGroup.Item>
<ListGroup.Item>
<Button className='btn-block' type='button'> add to Cart </Button>
</ListGroup.Item>
</ListGroup>
</Card>
</Col>
</Row>
</div>);
As pointed in comment, your products variable has value undefined, hence your code fails.
Its always recommended and good practice to guard your code and avoid failures. There are multiple ways to guard yourself from these sitations. Optional chaining operator, or logical &&.
So you could use something like:
return products && <div>...</div>; or for some cases you would like to show loader if you fetch data:
return !products ? 'Loading...' : <div>...</div;. Or you can use products?.myProp1 on every place where your products variable appear. It can be cumbersome to repeat the same stuff and maybe you wish to guard/handle it differently.
I used the React ant design drawer , When the user did not complete the form, I clicked on the outer side of the drawer and tried to display the notification message. but its not working, anyone know how to do that correctly
stack blitz here
Code here
import React, { Component } from 'react';
import { render } from 'react-dom';
import 'antd/dist/antd.css';
import './style.css';
import { Drawer, Form, Button, Col, Row, Input, Select, DatePicker, Icon } from 'antd';
const { Option } = Select;
class App extends Component {
state = { visible: false };
showDrawer = () => {
this.setState({
visible: true,
});
};
onClose = () => {
this.setState({
visible: false,
});
};
render() {
return (
<div>
<Button type="primary" onClick={this.showDrawer}>
<Icon type="plus" /> New account
</Button>
<Drawer
title="Create a new account"
width={720}
onClose={this.onClose}
visible={this.state.visible}
bodyStyle={{ paddingBottom: 80 }}
>
<Row gutter={16}>
<Col span={12}>
<Form.Item label="Name">
<Input placeholder="Please enter user name" />)}
</Form.Item>
</Col>
<Col span={12}>
<Form.Item label="Url">
<Input
style={{ width: '100%' }}
addonBefore="http://"
addonAfter=".com"
placeholder="Please enter url"
/>
</Form.Item>
</Col>
</Row>
<Row gutter={16}>
<Col span={12}>
<Form.Item label="Owner">
<Select placeholder="Please select an owner">
<Option value="xiao">Xiaoxiao Fu</Option>
<Option value="mao">Maomao Zhou</Option>
</Select>
</Form.Item>
</Col>
<Col span={12}>
<Form.Item label="Type">
<Select placeholder="Please choose the type">
<Option value="private">Private</Option>
<Option value="public">Public</Option>
</Select>
</Form.Item>
</Col>
</Row>
<Row gutter={16}>
<Col span={12}>
<Form.Item label="Approver">
<Select placeholder="Please choose the approver">
<Option value="jack">Jack Ma</Option>
<Option value="tom">Tom Liu</Option>
</Select>
</Form.Item>
</Col>
<Col span={12}>
<Form.Item label="DateTime">
<DatePicker.RangePicker
style={{ width: '100%' }}
getPopupContainer={trigger => trigger.parentNode}
/>
</Form.Item>
</Col>
</Row>
<Row gutter={16}>
<Col span={24}>
<Form.Item label="Description">
<Input.TextArea rows={4} placeholder="please enter url description" />)}
</Form.Item>
</Col>
</Row>
<div
style={{
position: 'absolute',
right: 0,
bottom: 0,
width: '100%',
borderTop: '1px solid #e9e9e9',
padding: '10px 16px',
background: '#fff',
textAlign: 'right',
}}
>
<Button onClick={this.onClose} style={{ marginRight: 8 }}>
Cancel
</Button>
<Button onClick={this.onClose} type="primary">
Submit
</Button>
</div>
</Drawer>
</div>
);
}
}
render(<App />, document.getElementById('root'));
You need to add the logic about displaying notification on the onClose method of the <Drawer/>. Note that this method takes as input the elements that can trigger 'close' of drawer which are a div (background mask), an svg (X icon) and a button (Cancel).
At the following example the error notification is displayed if any input is empty when the drawer mask is clicked.
You can find also the example here: https://stackblitz.com/edit/react-28u4zw
import React, { Component } from "react";
import { render } from "react-dom";
import "antd/dist/antd.css";
import "./style.css";
import {
message,
Drawer,
Form,
Button,
Col,
Row,
Input,
Select,
DatePicker,
Icon
} from "antd";
const { Option } = Select;
const FIELD_NAMES = ["name", "url", "owner", "type", "approver", "dates"];
const initialValues = FIELD_NAMES.reduce(
(fieldList, fieldName) => ({ ...fieldList, [fieldName]: null }),
{}
);
class App extends Component {
state = {
visible: false,
...initialValues
};
showDrawer = () => {
this.setState({
visible: true
});
};
onClose = e => {
this.setState({
visible: false
});
const emptyFieldNames = FIELD_NAMES.filter(
fieldName => !this.state[fieldName]
);
if (emptyFieldNames.length > 0 && e.target.tagName === "DIV") {
return message.error(
`Please fill ${emptyFieldNames.join(", ")} field(s)`
);
}
};
setInput = fieldName => e => {
this.setState({ [fieldName]: e.target.value });
};
setSelect = fieldName => val => {
this.setState({ [fieldName]: val });
};
setDate = fieldName => dateList => {
this.setState({ [fieldName]: dateList.length > 0 ? dateList : null });
};
render() {
return (
<div>
<Button type="primary" onClick={this.showDrawer}>
<Icon type="plus" /> New account
</Button>
<Drawer
title="Create a new account"
width={720}
onClose={this.onClose}
visible={this.state.visible}
bodyStyle={{ paddingBottom: 80 }}
>
<Row gutter={16}>
<Col span={12}>
<Form.Item label="Name">
<Input
placeholder="Please enter user name"
onChange={this.setInput("name")}
/>
)}
</Form.Item>
</Col>
<Col span={12}>
<Form.Item label="Url">
<Input
style={{ width: "100%" }}
addonBefore="http://"
addonAfter=".com"
placeholder="Please enter url"
onChange={this.setInput("url")}
/>
</Form.Item>
</Col>
</Row>
<Row gutter={16}>
<Col span={12}>
<Form.Item label="Owner">
<Select
placeholder="Please select an owner"
onChange={this.setSelect("owner")}
>
<Option value="xiao">Xiaoxiao Fu</Option>
<Option value="mao">Maomao Zhou</Option>
</Select>
</Form.Item>
</Col>
<Col span={12}>
<Form.Item label="Type">
<Select
placeholder="Please choose the type"
onChange={this.setSelect("type")}
>
<Option value="private">Private</Option>
<Option value="public">Public</Option>
</Select>
</Form.Item>
</Col>
</Row>
<Row gutter={16}>
<Col span={12}>
<Form.Item label="Approver">
<Select
placeholder="Please choose the approver"
onChange={this.setSelect("approver")}
>
<Option value="jack">Jack Ma</Option>
<Option value="tom">Tom Liu</Option>
</Select>
</Form.Item>
</Col>
<Col span={12}>
<Form.Item label="DateTime">
<DatePicker.RangePicker
style={{ width: "100%" }}
getPopupContainer={trigger => trigger.parentNode}
onChange={this.setDate("dates")}
/>
</Form.Item>
</Col>
</Row>
<Row gutter={16}>
<Col span={24}>
<Form.Item label="Description">
<Input.TextArea
rows={4}
placeholder="please enter url description"
/>
)}
</Form.Item>
</Col>
</Row>
<div
style={{
position: "absolute",
right: 0,
bottom: 0,
width: "100%",
borderTop: "1px solid #e9e9e9",
padding: "10px 16px",
background: "#fff",
textAlign: "right"
}}
>
<Button onClick={this.onClose} style={{ marginRight: 8 }}>
Cancel
</Button>
<Button onClick={this.onClose} type="primary">
Submit
</Button>
</div>
</Drawer>
</div>
);
}
}
render(<App />, document.getElementById("root"));
I am using antd's selector, I want to add a prompt to the left of the selection box to indicate what this selector is used to select. I tried to use the label tag in the select tag, but this will give an error. I also thought about using pseudo-elements, but that didn't work. Do you know how to do it. The effect I want is as follows. The left side of the selection box is the prompt word, and the right side is the selection result of the selector.
There is no build-in way, you need to compose it from other components.
For example: using CheckBox, Dropdown, Menu and layout components like Row and Col
const data = ['Jack', 'Lucy', 'Momo', 'Alex'];
export default function App() {
const [selected, setSelected] = useState('Jack');
const menu = (
<Menu onSelect={({ key }) => setSelected(key)}>
{data.map(item => (
<Menu.Item key={item} value={item}>
{item}
</Menu.Item>
))}
</Menu>
);
return (
<FlexBox>
<FlexBox>
<h3>All Checkboxed</h3>
<Select defaultValue="Jack">
{data.map(uniqueValue => (
<Select.Option value={uniqueValue} key={uniqueValue}>
<Checkbox>{uniqueValue}</Checkbox>
</Select.Option>
))}
</Select>
</FlexBox>
<FlexBox>
<h3>Side By Side</h3>
<Checkbox disabled>
<Select defaultValue="Jack">
{data.map(uniqueValue => (
<Select.Option value={uniqueValue} key={uniqueValue}>
{uniqueValue}
</Select.Option>
))}
</Select>
</Checkbox>
</FlexBox>
<FlexBox>
<Card size="small" style={{ width: 120 }}>
<Row type="flex" gutter={10}>
<Col>
<Checkbox disabled />
</Col>
<Col>
<Dropdown overlay={menu} trigger={['click']}>
<Row type="flex" style={{ alignItems: 'center' }} gutter={10}>
<Col>{selected}</Col>
<Col>
<Icon type="down" />
</Col>
</Row>
</Dropdown>
</Col>
</Row>
</Card>
</FlexBox>
</FlexBox>
);
}
I've been struggling with this for some time now. I'm creating a huge form and want to use controlled components. The only problem is, it's getting really slow, since my form is being rerendered with every keytroke I make.
Here is the Performance-Measurement for 10 keystrokes in one of my fields:
The React-Class (it's not complete yet):
class OrderEdit extends Component {
constructor(params) {
super(params);
this.state = {
activeTab: 1,
order: null,
customerValue: '',
warningTextCustomer: ''
};
this.loadOrder();
}
loadOrder = () => {
var me = this;
new ApiCall()
.withUrl('orders/edit/' + this.props.serialNumber)
.onSuccess((order) => {
me.setState({
order: order
});
})
.get();
};
validateCustomer = () => {
return;
if (!this.state.order.Customer) {
this.setState({
warningTextCustomer: 'Bitte gib einen Kunden an.'
});
} else {
this.setState({
warningTextCustomer: ''
});
}
};
onCustomerBlur = (event) => {
//this.validateCustomer();
};
onCustomerUpdateItem = (item) => {
var newOrder = this.state.order;
newOrder.Customer = item;
newOrder.Sender = item;
this.setState({
order: newOrder
}, () => this.validateCustomer);
};
onCustomerUpdateValue = (value) => {
this.setState({
customerValue: value
});
};
onSelectTab = (tabIndex) => {
this.setState({
activeTab: tabIndex
});
};
onUpdateDepartureDate = (date) => {
var newOrder = this.state.order;
newOrder.DepartureTimeFrom = date;
this.setState({order: newOrder})
};
render() {
if (!this.state.order) {
return (<Spinner style={{marginTop: '25%'}}/>);
}
return (
<PageContainer>
<PageTitle style={{marginBottom: 40}}
Title={"Auftrag " + this.state.order.SerialNumber + " bearbeiten"}/>
<Tabs activeTab={this.state.activeTab} onSelect={this.onSelectTab}>
<tab tabIndex={1} title="Allgemein">
<Section title="Allgemein">
<Row style={{marginBottom: 20}}>
<Col xs={12} md={6}>
<AutocompleteFieldCustomer
ref="customer"
title="Kunde"
focusAfterInit={true}
warningText={this.state.warningTextCustomer}
canCreate={true}
value={this.state.customerValue}
valueItem={this.state.order.Customer}
onBlur={this.onCustomerBlur}
onUpdateItem={this.onCustomerUpdateItem}
onUpdateValue={this.onCustomerUpdateValue}
titleElements={this.state.order.Customer.IsNewItem ?
<FieldTitleSuccess title="Kunde wird neu angelegt"/> : null}/>
<FieldNote text="Nicht existierende Kunden werden automatisch angelegt."/>
</Col>
</Row>
</Section>
<Section title="Sendung">
<Row style={{marginBottom: 20}}>
<Col xs={12} md={6}>
<Row style={{marginBottom: 20}}>
<Col xs={12} md={12}>
<AutocompleteFieldCustomer
title="Absender + Beladestation"/>
</Col>
</Row>
<Row style={{marginBottom: 20}}>
<Col xs={12} md={12}>
<LocationField />
</Col>
</Row>
<Row>
<Col xs={12} md={6}>
<DateField
title="Datum"/>
</Col>
<Col xs={12} md={6}>
<Row>
<Col xs={12} md={6}>
<TimeField title="Von"/>
</Col>
<Col xs={12} md={6}>
<TimeField title="Bis"/>
</Col>
</Row>
</Col>
</Row>
</Col>
<Col xs={12} md={6}>
<Row style={{marginBottom: 20}}>
<Col xs={12} md={12}>
<AutocompleteFieldCustomer
title="Empfänger + Entladestation"/>
</Col>
</Row>
<Row style={{marginBottom: 20}}>
<Col xs={12} md={12}>
<LocationField />
</Col>
</Row>
<Row>
<Col xs={12} md={6}>
<TextField title="Datum"/>
</Col>
<Col xs={12} md={6}>
<Row>
<Col xs={12} md={6}>
<TimeField title="Von"/>
</Col>
<Col xs={12} md={6}>
<TimeField title="Bis"/>
</Col>
</Row>
</Col>
</Row>
</Col>
</Row>
</Section>
<Section title="Fahrt">
<Row style={{marginBottom: 20}}>
<Col xs={12} md={6}>
<div style={{marginBottom: 20}}>
<AutocompleteFieldVehicle
title="Fahrzeug"
canCreate={true}/>
</div>
<div style={{marginBottom: 20}}>
<AutocompleteFieldUser
title="Fahrer"
canCreate={true}/>
</div>
</Col>
<Col xs={12} md={6}>
<AutocompleteFieldCustomer
title="Frachtführer"
canCreate={true}/>
</Col>
</Row>
</Section>
<Section title="Fakturierung">
<Row style={{marginBottom: 20}}>
<Col xs={12} md={6}>
<div style={{marginBottom: 20}}>
<AutocompleteFieldCustomer
title="Rechnungsempfänger Kunde"
canCreate={true}/>
</div>
<Row style={{marginBottom: 20}}>
<Col xs={12} md={6}>
<TextField title="Auftragspreis"/>
</Col>
<Col xs={12} md={6}>
<AutocompleteFieldTax
title="Steuerschlüssel"
canCreate={true}/>
</Col>
</Row>
</Col>
<Col xs={12} md={6}>
<div style={{marginBottom: 20}}>
<AutocompleteFieldCustomer
title="Gurtschriftempfänger Frachtführer"
canCreate={true}/>
</div>
<Row style={{marginBottom: 20}}>
<Col xs={12} md={6}>
<TextField title="Fahrtpreis"/>
</Col>
<Col xs={12} md={6}>
<AutocompleteFieldTax
title="Steuerschlüssel"
canCreate={true}/>
</Col>
</Row>
</Col>
</Row>
</Section>
</tab>
<tab tabIndex={2} title="Karte">Tab 3 content</tab>
</Tabs>
</PageContainer>
);
}
}
Does anyone know a solution for this? I've been reading a lot about Pure-Render-Mixin, shouldComponentUpdate, Immutable, but I'm not sure whether any of that would help me here or not.
thanks