Develop Reference

Not able to call onChange function of a TextInput in Redux, React JS

I am working on an app with React and Redux and displaying some data from API in TextInput control. But now I am not able to edit the data in the TextInput. Following is my complete code of the class:
import React, { Component } from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";
import Article from "grommet/components/Article";
import Box from "grommet/components/Box";
import Button from "grommet/components/Button";
import Header from "grommet/components/Header";
import Heading from "grommet/components/Heading";
import Section from "grommet/components/Section";
import AdminMenu from "../../components/Nav/Admin";
import NavControl from "../../components/Nav/Control";
import { getMessage } from "grommet/utils/Intl";
import Notices from "../../components/Notices";
import CheckBox from "grommet/components/CheckBox";
import TextInput from "grommet/components/TextInput";
import { pageLoaded } from "../utils";
import {
recognitionSettingsLoaded,
recognitionSettingsSaved,
} from "../../actions/settings-recognition";
import dashboard from "../../reducers/dashboard";
class Settings extends Component {
constructor(props) {
super(props);
this.handleDaysChange = this.handleDaysChange.bind(this);
this.handleActiveChange = this.handleActiveChange.bind(this);
}
componentDidMount() {
const { dispatch, settingRecognition } = this.props;
console.log(this.props.state);
console.log(dashboard);
dispatch(recognitionSettingsLoaded("2"));
pageLoaded("Configuration");
}
onSave() {
const { survey, dispatch } = this.props;
dispatch(
recognitionSettingsSaved(
this.props.settingRecognition.days,
this.props.settingRecognition.active
)
);
}
handleDaysChange(e) {
const days = e.target.value;
settingRecognition.days = days;
}
handleActiveChange(e) {
const active = e.target.value;
settingRecognition.active = active;
}
render() {
const { dispatch, settingRecognition } = this.props;
console.log("render method");
console.log(settingRecognition);
const { intl } = this.context;
return (
<Article primary={true}>
<Header
direction="row"
justify="between"
size="large"
pad={{ horizontal: "medium", between: "small" }}
>
<NavControl name={getMessage(intl, "Configuration")} />
<AdminMenu />
</Header>
<Box pad={{ horizontal: "medium", vertical: "medium" }}>
<Heading tag="h4" margin="none">
{getMessage(intl, "RecognitionLifetime")}
</Heading>
<Heading tag="h5" margin="none">
{getMessage(intl, "DefineIsRecognitionTemporary")}
</Heading>
<Box direction="row">
<CheckBox
toggle={true}
checked={settingRecognition.active}
onChange={this.handleActiveChange}
/>{" "}
<Heading tag="h3" margin="none">
{getMessage(intl, "NewUserActive")}
</Heading>
</Box>
<Heading tag="h3" margin="none">
{getMessage(intl, "HideAfter")}
</Heading>
<Box direction="row">
<TextInput
placeholder="type here"
value={settingRecognition.days.toString()}
onChange={this.handleDaysChange}
/>{" "}
<Heading tag="h3" margin="none">
{getMessage(intl, "Days")}
</Heading>
</Box>
<Button
path="/recognition-settings"
label={getMessage(intl, "NewUserSave")}
primary={true}
onClick={() => {
this.onSave();
}}
/>
</Box>
<Notices />
</Article>
);
}
}
Settings.propTypes = {
dispatch: PropTypes.func.isRequired,
settingRecognition: PropTypes.object.isRequired,
};
Settings.contextTypes = {
intl: PropTypes.object,
};
const mapStateToProps = (state) => ({
settingRecognition: state.settingRecognition,
});
export default connect(mapStateToProps)(Settings);
I have created handleDaysChange function which should run on the text change of TextInput control. I have done similar thing for the checkbox and that works fine but I am not able to get it working for the TextInput.

You are not binding your change events.
Try this....
class Settings extends Component {
constructor(props){
super(props);
this.handleDaysChange = this.handleDaysChange.bind(this);
this.handleActiveChange = this.handleActiveChange.bind(this);
}
componentDidMount(){
....
}
......
}
and change this
<CheckBox
toggle={true}
checked={settingRecognition.active}
onChange={(e) => this.handleActiveChange(e)}
/>
To this
<CheckBox
toggle={true}
checked={settingRecognition.active}
onChange={this.handleActiveChange}
/>
same for text input
<TextInput
placeholder="type here"
value={settingRecognition.days.toString()}
onChange={this.handleDaysChange}
/>

You need to set up two-way-binding so that the content of the textInput reflects the prop that you set in your onChange function. Try giving your textInput a property of value={this.settingRecognition.days}

How to make a navigationbar that contains custom Components with Material UI and React?

I am trying to use the BottomNavigation from Material UI. However, instead of showing lables and text I want to use custom-made ImageButtons components.
I have the following code from Material UI:
import React from 'react';
import { makeStyles } from '#material-ui/core/styles';
import BottomNavigation from '#material-ui/core/BottomNavigation';
import ImageButton from '.././buttons/ImageButton';
const useStyles = makeStyles({
root: {
width: 1200,
},
});
export default function CreateProjectNavigation() {
const classes = useStyles();
const [value, setValue] = React.useState(0);
return (
<BottomNavigation
value={value}
onChange={(event, newValue) => {
setValue(newValue);
}}
showLabels
className={classes.root}
>
<ImageButton buttonNr="1" text="Project Details" />
<ImageButton buttonNr="2" text="Types/Discipline" />
<ImageButton buttonNr="3" text="Fieldwork" />
<ImageButton buttonNr="4" text="Personell and Institutions" />
<ImageButton buttonNr="5" text="Summary" />
</BottomNavigation>
);
}
And here is the code for the ImageButton:
import React from 'react';
import { makeStyles } from '#material-ui/core/styles';
import EditIcon from '#material-ui/icons/Edit';
import MenuBookIcon from '#material-ui/icons/MenuBook';
import RoomIcon from '#material-ui/icons/Room';
import PeopleIcon from '#material-ui/icons/People';
import DoneIcon from '#material-ui/icons/Done';
import Button from '#material-ui/core/Button';
import Grid from '#material-ui/core/Grid';
const useStyles = makeStyles(theme => ({
root: {
margin: theme.spacing(1),
borderRadius: '50%',
height: '75px',
width: '75px',
'&$disabled': {
backgroundColor: '#0af7ff',
color: '#000000',
},
},
disabled: {},
}));
export default function ImageButton({ active, buttonNr, text, handler, link }) {
let icon;
const classes = useStyles();
switch (buttonNr) {
case '1':
icon = <EditIcon />;
break;
case '2':
icon = <MenuBookIcon />;
break;
case '3':
icon = <RoomIcon />;
break;
case '4':
icon = <PeopleIcon />;
break;
case '5':
icon = <DoneIcon />;
break;
default:
break;
}
return (
<Grid container direction="column" justify="" alignItems="center">
<Button
variant="contained"
classes={{
root: classes.root,
disabled: classes.disabled,
}}
disabled={active}
onClick={handler}
href={link}
>
{icon}
</Button>
<p>
<b>{text}</b>
</p>
</Grid>
);
}
Unfortunately, the ImageButton turns out really disorted and wrong in the BottomNavigation bar. Additionally, the text below the image button just appears next to the button instead of under the moment it is placed in the BottomNavigation.
Does anyone have an idea on what to do about this?

I'm not sure, but I think you need to wrap your buttons inside BottomNavigationAction component for BottomNavigation. BottomNavigationAction has component props. Maybe you should to pass your buttons inside this props, because children prop is unsupported for BottomnavigationAction component.
Here you can see API details https://material-ui.com/api/bottom-navigation-action/

React Bottleneck TextInput Inputfield

I've got a big react app (with Redux) here that has a huge bottleneck.
We have implemented a product search by using product number or product name and this search is extremely laggy.
Problem: If a user types in some characters, those characters are shown in the InputField really retarded. The UI is frozen for a couple of seconds.
In Internet Explorer 11, the search is almost unusable.
It's a Material UI TextField that filters products.
What I already did for optimization:
Replaced things like style={{
maxHeight: 230,
overflowY: 'scroll',
}} with const cssStyle={..}
Changed some critical components from React.Component to React.PureComponent
Added shouldComponentUpdate for our SearchComponent
Removed some unnecessary closure bindings
Removed some unnecessary objects
Removed all console.log()
Added debouncing for the input field (that makes it even worse)
That's how our SearchComponent looks like at the moment:
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Downshift from 'downshift';
import TextField from '#material-ui/core/TextField';
import MenuItem from '#material-ui/core/MenuItem';
import Paper from '#material-ui/core/Paper';
import IconTooltip from '../helper/icon-tooltip';
import { translate } from '../../utils/translations';
const propTypes = {
values: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
legend: PropTypes.string,
helpText: PropTypes.string,
onFilter: PropTypes.func.isRequired,
selected: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
isItemAvailable: PropTypes.func,
};
const defaultProps = {
legend: '',
helpText: '',
selected: '',
isItemAvailable: () => true,
};
const mapNullToDefault = selected =>
(selected === null || selected === undefined ? '' : selected);
const mapDefaultToNull = selected => (!selected.length ? null : selected);
class AutoSuggestField extends Component {
shouldComponentUpdate(nextProps) {
return this.props.selected !== nextProps.selected;
}
getLegendNode() {
const { legend, helpText } = this.props;
return (
<legend>
{legend}{' '}
{helpText && helpText.length > 0 ? (
<IconTooltip helpText={helpText} />
) : (
''
)}
</legend>
);
}
handleEvent(event) {
const { onFilter } = this.props;
const value = mapDefaultToNull(event.target.value);
onFilter(value);
}
handleOnSelect(itemId, item) {
const { onFilter } = this.props;
if (item) {
onFilter(item.label);
}
}
render() {
const { values, selected, isItemAvailable } = this.props;
const inputValue = mapNullToDefault(selected);
const paperCSSStyle = {
maxHeight: 230,
overflowY: 'scroll',
};
return (
<div>
<div>{this.getLegendNode()}</div>
<Downshift
inputValue={inputValue}
onSelect={(itemId) => {
const item = values.find(i => i.id === itemId);
this.handleOnSelect(itemId, item);
}}
>
{/* See children-function on https://github.com/downshift-js/downshift#children-function */}
{({
isOpen,
openMenu,
highlightedIndex,
getInputProps,
getMenuProps,
getItemProps,
ref,
}) => (
<div>
<TextField
className="searchFormInputField"
InputProps={{
inputRef: ref,
...getInputProps({
onFocus: () => openMenu(),
onChange: (event) => {
this.handleEvent(event);
},
}),
}}
fullWidth
value={inputValue}
placeholder={translate('filter.autosuggest.default')}
/>
<div {...getMenuProps()}>
{isOpen && values && values.length ? (
<React.Fragment>
<Paper style={paperCSSStyle}>
{values.map((suggestion, index) => {
const isHighlighted = highlightedIndex === index;
const isSelected = false;
return (
<MenuItem
{...getItemProps({ item: suggestion.id })}
key={suggestion.id}
selected={isSelected}
title={suggestion.label}
component="div"
disabled={!isItemAvailable(suggestion)}
style={{
fontWeight: isHighlighted ? 800 : 400,
}}
>
{suggestion.label}
</MenuItem>
);
})}
</Paper>
</React.Fragment>
) : (
''
)}
</div>
</div>
)}
</Downshift>
</div>
);
}
}
AutoSuggestField.propTypes = propTypes;
AutoSuggestField.defaultProps = defaultProps;
export default AutoSuggestField;
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.5.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.5.0/umd/react-dom.production.min.js"></script>
It seems, that I did not find the performance problem as it still exists. Can someone help here?

Transforming values from react template for further use in states

This might be a duplicate question but I still couldn't find an answer. I am new to react and is struggling to create a login page. I am trying t set states with the values I have just entered in the application for further usage. Using these values I will be making a backed call for authentication.
My React Code
import React from "react";
// core components are added
class LoginPage extends React.Component {
constructor(props) {
super(props);
// we use this to make the card to appear after the page has been rendered
this.state = {
cardAnimaton: "cardHidden"
};
}
handleSubmit() {
console.log(this);
}
handleChange(event) {
console.log(event)
}
componentDidMount() {
// we add a hidden class to the card and after 700 ms we delete it and the transition appears
setTimeout(
function() {
this.setState({ cardAnimaton: "" });
}.bind(this),
700
);
}
render() {
const { classes, ...rest } = this.props;
return (
<div>
<div className={classes.container}>
<GridContainer justify="center">
<GridItem xs={12} sm={12} md={12}>
<Card className={classes[this.state.cardAnimaton]}>
<form className={classes.form} onSubmit = {this.handleSubmit}>
<CardHeader color="primary" className={classes.cardHeader}>
<h4>Login</h4>
</CardHeader>
<CardBody>
<CustomInput
labelText="Email..."
id="email"
onChange={this.handleChange}
value = {this.state.email}
formControlProps={{
fullWidth: true
}}
inputProps={{
type: "email",
endAdornment: (
<InputAdornment position="end">
<Email className={classes.inputIconsColor} />
</InputAdornment>
)
}}
/>
</CardBody>
<CardFooter className={classes.cardFooter}>
<Button color="primary" size="lg" type="submit">
Login
</Button>
</CardFooter>
</form>
</Card>
</GridItem>
</GridContainer>
</div>
</div>
);
}
}
export default withStyles(loginPageStyle)(LoginPage);
I am trying to send values from my HTML to state in handleChange but it is not reacting whenever I make a change.
If it something with states, please let me know. I am using a custom theme and hope that the issue is in my implementation and have nothing to do with the theme.
Custom Input Component
import React from "react";
// nodejs library to set properties for components
import PropTypes from "prop-types";
// nodejs library that concatenates classes
import classNames from "classnames";
// #material-ui/core components
import withStyles from "#material-ui/core/styles/withStyles";
import FormControl from "#material-ui/core/FormControl";
import InputLabel from "#material-ui/core/InputLabel";
import Input from "#material-ui/core/Input";
import customInputStyle from "assets/jss/material-kit-react/components/customInputStyle.jsx";
function CustomInput({ ...props }) {
const {
classes,
formControlProps,
labelText,
id,
labelProps,
inputProps,
error,
white,
inputRootCustomClasses,
success
} = props;
const labelClasses = classNames({
[" " + classes.labelRootError]: error,
[" " + classes.labelRootSuccess]: success && !error
});
const underlineClasses = classNames({
[classes.underlineError]: error,
[classes.underlineSuccess]: success && !error,
[classes.underline]: true,
[classes.whiteUnderline]: white
});
const marginTop = classNames({
[inputRootCustomClasses]: inputRootCustomClasses !== undefined
});
const inputClasses = classNames({
[classes.input]: true,
[classes.whiteInput]: white
});
var formControlClasses;
if (formControlProps !== undefined) {
formControlClasses = classNames(
formControlProps.className,
classes.formControl
);
} else {
formControlClasses = classes.formControl;
}
return (
<FormControl {...formControlProps} className={formControlClasses}>
{labelText !== undefined ? (
<InputLabel
className={classes.labelRoot + " " + labelClasses}
htmlFor={id}
{...labelProps}
>
{labelText}
</InputLabel>
) : null}
<Input
classes={{
input: inputClasses,
root: marginTop,
disabled: classes.disabled,
underline: underlineClasses
}}
id={id}
{...inputProps}
/>
</FormControl>
);
}
CustomInput.propTypes = {
classes: PropTypes.object.isRequired,
labelText: PropTypes.node,
labelProps: PropTypes.object,
id: PropTypes.string,
inputProps: PropTypes.object,
formControlProps: PropTypes.object,
inputRootCustomClasses: PropTypes.string,
error: PropTypes.bool,
success: PropTypes.bool,
white: PropTypes.bool
};
export default withStyles(customInputStyle)(CustomInput);

Why can't i get value select and input?

The problem is that I can't get the value customInput and customSelect and write it to the state? I can’t show all the code I’m trying to connect react dashboard material-ui. If I do the same with normal input and select I get data in state.
Can someone help with this? I can not give a working example, too much code...
import React from "react";
import { connect } from 'react-redux';
// #material-ui/core components
import withStyles from "#material-ui/core/styles/withStyles";
// core components
import GridItem from "components/Grid/GridItem.jsx";
import GridContainer from "components/Grid/GridContainer.jsx";
import CustomInput from "components/CustomInput/CustomInput.jsx";
import Button from "components/CustomButtons/Button.jsx";
import Card from "components/Card/Card.jsx";
import CardHeader from "components/Card/CardHeader.jsx";
import CardBody from "components/Card/CardBody.jsx";
import CardFooter from "components/Card/CardFooter.jsx";
import FormControl from "#material-ui/core/FormControl/FormControl";
import CustomSelect from "../../components/CustomSelect/CustomSelect";
import "../../components/CustomSelect/Select.css";
class NewExercise extends React.Component {
constructor(props) {
super(props);
this.state = {
value: 'Enter text',
};
}
handleChange = (event) => {
this.setState({
value: event.target.value,
});
};
handleClick = () => {
this.setState({
value: '',
});
console.log(this.state);
};
render() {
console.log('store', this.props.newExercise);
const { classes } = this.props;
return (
<div>
<GridContainer>
<GridItem xs={12} sm={12} md={12} lg={12}>
<form >
<Card>
<CardHeader color="primary">
<h4 className={classes.cardTitleWhite}>Create new exercise</h4>
<p className={classes.cardCategoryWhite}>Please, add a new exercise name and measurement type</p>
</CardHeader>
<CardBody>
<GridContainer>
<GridItem xs={12} sm={12} md={12}>
<CustomInput
value={this.state.value}
onChange={this.handleChange}
labelText="Exercise Name"
id="exercise"
formControlProps={{
fullWidth: true
}}
/>
</GridItem>
<GridItem xs={12} sm={12} md={12}>
<FormControl style={{width: "100%"}} className={classes.formControl}>
<div className="materialSelect">
<CustomSelect
labelText="Measurement"
id="custom-select"
formControlProps={{
fullWidth: true
}}
>
<option value="kg">kilograms</option>
<option value="min">minutes</option>
<option value="m">meters</option>
</CustomSelect>
</div>
</FormControl>
</GridItem>
</GridContainer>
</CardBody>
<CardFooter>
<Button color="primary" onClick={this.handleClick}> Create Exercise</Button>
</CardFooter>
</Card>
</form>
</GridItem>
</GridContainer>
</div>
);
}
}
export default connect (
state => ({
newExercise: state
}),
dispatch => ({})
) (withStyles(styles)(NewExercise));
// Custom Input of material-ui dashboard react
import React from "react";
import classNames from "classnames";
import PropTypes from "prop-types";
// #material-ui/core components
import withStyles from "#material-ui/core/styles/withStyles";
import FormControl from "#material-ui/core/FormControl";
import InputLabel from "#material-ui/core/InputLabel";
import Input from "#material-ui/core/Input";
// #material-ui/icons
import Clear from "#material-ui/icons/Clear";
import Check from "#material-ui/icons/Check";
// core components
import customInputStyle from "assets/jss/material-dashboard-
react/components/customInputStyle.jsx";
function CustomInput({ ...props }) {
const {
classes,
formControlProps,
labelText,
id,
labelProps,
inputProps,
error,
success
} = props;
const labelClasses = classNames({
[" " + classes.labelRootError]: error,
[" " + classes.labelRootSuccess]: success && !error
});
const underlineClasses = classNames({
[classes.underlineError]: error,
[classes.underlineSuccess]: success && !error,
[classes.underline]: true
});
const marginTop = classNames({
[classes.marginTop]: labelText === undefined
});
return (
<FormControl
{...formControlProps}
className={formControlProps.className + " " + classes.formControl}
>
{labelText !== undefined ? (
<InputLabel
className={classes.labelRoot + labelClasses}
htmlFor={id}
{...labelProps}
>
{labelText}
</InputLabel>
) : null}
<Input
classes={{
root: marginTop,
disabled: classes.disabled,
underline: underlineClasses
}}
id={id}
{...inputProps}
/>
{error ? (
<Clear className={classes.feedback + " " + classes.labelRootError} />
) : success ? (
<Check className={classes.feedback + " " + classes.labelRootSuccess} />
) : null}
</FormControl>
);
}
CustomInput.propTypes = {
classes: PropTypes.object.isRequired,
labelText: PropTypes.node,
labelProps: PropTypes.object,
id: PropTypes.string,
inputProps: PropTypes.object,
formControlProps: PropTypes.object,
error: PropTypes.bool,
success: PropTypes.bool
};
export default withStyles(customInputStyle)(CustomInput);

check this example:
//custom component
import React from 'react'
import PropTypes from 'prop-types'
import Radio from '#material-ui/core/Radio'
export const BmRadio = (props) => {
return <Radio onClick={this.props.onClick} {...props} />
}
BmRadio.defaultProps = {
color: 'primary'
}
BmRadio.propTypes = {
onClick: PropTypes.func,
color: PropTypes.oneOf(['default', 'primary', 'secondary']),
icon: PropTypes.oneOfType([PropTypes.element, PropTypes.string]),
checkedIcon: PropTypes.oneOfType([PropTypes.element, PropTypes.string]),
value: PropTypes.string,
disabled: PropTypes.bool,
onChange: PropTypes.func,
type: PropTypes.string
}
//main component
import React, {PureComponent} from 'react'
import {BmRadio} from '#components'
class MainComponent extends PureComponent {
handleOnClick =(event)=>{
console.log(event) //event from Radio button then click in main component
}
render(){
return(
<BmRadio onClick={this.handleOnClick}/>
)
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
try event.currentTarget.value. Maybe help if i understand your question correctly
if you want to get value from custom component, you need to pass onChange property in custom component.
const {
classes,
formControlProps,
labelText,
id,
labelProps,
inputProps,
error,
success
onChange //get like props
} = props;
//and in component
<Input
classes={{
root: marginTop,
disabled: classes.disabled,
underline: underlineClasses
}}
id={id}
onChange={onChange}
{...inputProps}
/>
//and in place, where you render custom component create change handler and pass it in this component like onChange={this.handleOnChange}
handleOnChange = (event) => {
this.setState({
value = event.target.value
})
}