I want to change the variant of the Button component whenever it gets clicked, from 'outlined' to 'contained':
<Button variant='outlined'>Click me to change my variant to contained</Button>
Is that possible in MUI? using React refs? or how can I achieve this?
you can achieve it like this:
import React, { useState } from 'react';
function App() {
const [currentButtonVariant, setCurrentButtonVariant] = useState('outlined');
const handleButtonVariantChange = () => {
if (currentButtonVariant === 'outlined') {
setCurrentButtonVariant('contained');
}
else {
setCurrentButtonVariant('outlined');
}
}
return (
<div className="App">
<Button variant={currentButtonVariant} onClick={handleButtonVariantChange}>Click me to change my variant to contained</Button>
</div>
);
}
Related
I am new to react native and I want to toggle text on pressing the button, but the problem is that when I press button the text changed but when I press it again nothing happen. Here is my code:
enter image description here
When you use react hooks, you configure the component to do things after it renders. If you declare a variable outside of a useState hook, it will be reset on every render. This is what happens to your isTrue variable. Read more about the rules of hooks here.
You also don't need to evaluate isTrue == true, you can just call isTrue, it will have the same effect.
export default function App() {
var startingText = "First text"
const [isTrue, setIsTrue] = useState(true)
const [outputText, setOutputText] = useState(startingText)
function textChange() {
setIsTrue(!isTrue)
return isTrue ? startingText : setOutputText("Text Changed")
}
return(
<View>
<Text>{outputText}</Text>
<Button title="Change Text" onPress={textChange}/>
</View>
)
}
You can simplify the code even further by removing the boolean variable and moving the logic of selecting which text value to set in the textChange function directly using a ternary operator.
export default function App() {
var startingText = ""
const [outputText, setOutputText] = useState(startingText)
function textChange() {
setOutputText(outputText === startingText ? "Text Changed" : startingText)
}
return(
<View>
<Text>{outputText}</Text>
<Button title="Change Text" onPress={textChange}/>
</View>
)
}
Try to change the function on:
const [tooggle, setToggle] = useState(false);
function textChange() {
setToggle(!tooggle);
return isTrue === tooggle
? setOutputText('first')
: setOutputText('second');
}
Example of toggle:
import React, { useState } from 'react';
import { Button, View, Text } from 'react-native';
const ToggleFunction = () => {
const [outPutText, setOutputText] = useState('first');
const [tooggle, setToggle] = useState(false);
function textChange() {
setToggle(!tooggle);
return tooggle ? setOutputText('first') : setOutputText('second');
}
return (
<View
style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}
>
<Text>{outPutText}</Text>
<Button title="button" onPress={textChange} />
</View>
);
};
export { ToggleFunction };
After I got the focus on Material UI Link through keyboard tab key using tabIndex, the click action is not working when I hit the enter button. I don't understand why. Can anyone help me with this? Thank you.
sandbox link: https://codesandbox.io/s/material-demo-forked-4evbh?file=/demo.tsx
code:
/* eslint-disable jsx-a11y/anchor-is-valid */
import React from "react";
import { makeStyles, createStyles, Theme } from "#material-ui/core/styles";
import Link from "#material-ui/core/Link";
import Typography from "#material-ui/core/Typography";
const useStyles = makeStyles((theme: Theme) =>
createStyles({
root: {
"& > * + *": {
marginLeft: theme.spacing(2)
}
}
})
);
export default function Links() {
const classes = useStyles();
const [state, setState] = React.useState(true);
const handleClick = () => {
setState(!state);
};
return (
<Typography className={classes.root}>
<Link onClick={handleClick} tabIndex={0}>
Link
</Link>
<Typography>Click on above link to display hidden content..</Typography>
{state ? "" : "focus on Link using Tab key?"}
</Typography>
);
}
Set component prop to button as follows:
export default function Links() {
const classes = useStyles();
const [state, setState] = React.useState(true);
const handleClick = () => {
setState(!state);
};
return (
<Typography className={classes.root}>
<Link onClick={handleClick} tabIndex={0} component="button">
Link
</Link>
</Typography>
);
}
I have used onKeyPress attribute to achieve the click action through keyboard tab key without using component="button" or href like below.
function goToDetails(event, id)
{
if(event.key === 'Enter'){
event.preventDefault();
history.push(`/`);
}
else {
event.preventDefault();
history.push(`/`);
}
}
<Link tabIndex={0} onKeyPress={(event) => goToDetails(event, row.id)} onClick={(event) => goToDetails(event, row.id)}>
Go to details
</Link>
I'm trying to build a form with conditional fields from a JSON schema using react-jsonschema-form and react-jsonschem-form-conditionals.
The components I'm rendering are a FormWithConditionals and a FormModelInspector. The latter is a very simple component that shows the form model.
The relevant source code is:
import React from 'react';
import PropTypes from 'prop-types';
import Engine from "json-rules-engine-simplified";
import Form from "react-jsonschema-form";
import applyRules from "react-jsonschema-form-conditionals";
function FormModelInspector (props) {
return (
<div>
<div className="checkbox">
<label>
<input type="checkbox" onChange={props.onChange} checked={props.showModel}/>
Show Form Model
</label>
</div>
{
props.showModel && <pre>{JSON.stringify(props.formData, null, 2)}</pre>
}
</div>
)
}
class ConditionalForm extends React.Component {
constructor (props) {
super(props);
this.state = {
formData: {},
showModel: true
};
this.handleFormDataChange = this.handleFormDataChange.bind(this);
this.handleShowModelChange = this.handleShowModelChange.bind(this);
}
handleShowModelChange (event) {
this.setState({showModel: event.target.checked});
}
handleFormDataChange ({formData}) {
this.setState({formData});
}
render () {
const schema = {
type: "object",
title: "User form",
properties: {
nameHider: {
type: 'boolean',
title: 'Hide name'
},
name: {
type: 'string',
title: 'Name'
}
}
};
const uiSchema = {};
const rules = [{
conditions: {
nameHider: {is: true}
},
event: {
type: "remove",
params: {
field: "name"
}
}
}];
const FormWithConditionals = applyRules(schema, uiSchema, rules, Engine)(Form);
return (
<div className="row">
<div className="col-md-6">
<FormWithConditionals schema={schema}
uiSchema={uiSchema}
formData={this.state.formData}
onChange={this.handleFormDataChange}
noHtml5Validate={true}>
</FormWithConditionals>
</div>
<div className="col-md-6">
<FormModelInspector formData={this.state.formData}
showModel={this.state.showModel}
onChange={this.handleShowModelChange}/>
</div>
</div>
);
}
}
ConditionalForm.propTypes = {
schema: PropTypes.object.isRequired,
uiSchema: PropTypes.object.isRequired,
rules: PropTypes.array.isRequired
};
ConditionalForm.defaultProps = {
uiSchema: {},
rules: []
};
However, every time I change a field's value, the field loses focus. I suspect the cause of the problem is something in the react-jsonschema-form-conditionals library, because if I replace <FormWithConditionals> with <Form>, the problem does not occur.
If I remove the handler onChange={this.handleFormDataChange} the input field no longer loses focus when it's value changes (but removing this handler breaks the FormModelInspector).
Aside
In the code above, if I remove the handler onChange={this.handleFormDataChange}, the <FormModelInspector> is not updated when the form data changes. I don't understand why this handler is necessary because the <FormModelInspector> is passed a reference to the form data via the formData attribute. Perhaps it's because every change to the form data causes a new object to be constructed, rather than a modification of the same object?
The problem is pretty straightforward, you are creating a FormWithConditionals component in your render method and in your onChange handler you setState which triggers a re-render and thus a new instance of FormWithConditionals is created and hence it loses focus. You need to move this instance out of render method and perhaps out of the component itself since it uses static values.
As schema, uiSchema and rules are passed as props to the ConditionalForm, you can create an instance of FormWithConditionals in constructor function and use it in render like this
import React from 'react';
import PropTypes from 'prop-types';
import Engine from "json-rules-engine-simplified";
import Form from "react-jsonschema-form";
import applyRules from "react-jsonschema-form-conditionals";
function FormModelInspector (props) {
return (
<div>
<div className="checkbox">
<label>
<input type="checkbox" onChange={props.onChange} checked={props.showModel}/>
Show Form Model
</label>
</div>
{
props.showModel && <pre>{JSON.stringify(props.formData, null, 2)}</pre>
}
</div>
)
}
class ConditionalForm extends React.Component {
constructor (props) {
super(props);
this.state = {
formData: {},
showModel: true
};
const { schema, uiSchema, rules } = props;
this.FormWithConditionals = applyRules(schema, uiSchema, rules, Engine)(Form);
this.handleFormDataChange = this.handleFormDataChange.bind(this);
this.handleShowModelChange = this.handleShowModelChange.bind(this);
}
handleShowModelChange (event) {
this.setState({showModel: event.target.checked});
}
handleFormDataChange ({formData}) {
this.setState({formData});
}
render () {
const FormWithConditionals = this.FormWithConditionals;
return (
<div className="row">
<div className="col-md-6">
<FormWithConditionals schema={schema}
uiSchema={uiSchema}
formData={this.state.formData}
onChange={this.handleFormDataChange}
noHtml5Validate={true}>
</FormWithConditionals>
</div>
<div className="col-md-6">
<FormModelInspector formData={this.state.formData}
showModel={this.state.showModel}
onChange={this.handleShowModelChange}/>
</div>
</div>
);
}
}
ConditionalForm.propTypes = {
schema: PropTypes.object.isRequired,
uiSchema: PropTypes.object.isRequired,
rules: PropTypes.array.isRequired
};
ConditionalForm.defaultProps = {
uiSchema: {},
rules: []
};
For anyone bumping into the same problem but using Hooks, here's how without a class :
Just use a variable declared outside the component and initialize it inside useEffect. (don't forget to pass [] as second parameter to tell react that we do not depend on any variable, replicating the componentWillMount effect)
// import ...
import Engine from 'json-rules-engine-simplified'
import Form from 'react-jsonschema-form'
let FormWithConditionals = () => null
const MyComponent = (props) => {
const {
formData,
schema,
uischema,
rules,
} = props;
useEffect(() => {
FormWithConditionals = applyRules(schema, uischema, rules, Engine)(Form)
}, [])
return (
<FormWithConditionals>
<div></div>
</FormWithConditionals>
);
}
export default MyComponent
Have you tried declaring function FormModelInspector as an arrow func :
const FormModelInspector = props => (
<div>
<div className="checkbox">
<label>
<input type="checkbox" onChange={props.onChange} checked={props.showModel}/>
Show Form Model
</label>
</div>
{
props.showModel && <pre>{JSON.stringify(props.formData, null, 2)}</pre>
}
</div>
)
Looking around the next I could not find the answer: How do I dynamicly include a file, based on prop change per say: here some sudo code to intrastate what I'm trying to do!
class Test extends React.Component {
constructor(props){
super(props)
this.state = { componentIncluded: false }
includeFile() {
require(this.props.componetFileDir) // e.g. ./file/dir/comp.js
this.setState({ componentIncluded: true });
}
render() {
return(
<div className="card">
<button onClick={this.includeFile}> Load File </button>
{ this.state.componentIncluded &&
<this.state.customComponent />
}
</div>
)
}
}
so this.props.componetFileDir has access to the file dir, but I need to dynamically include it, and can't really do require() as its seems to running before the action onClick get called. Any help would be great.
Em, Your code looks a bit wrong to me. So I created a separate demo for dynamic inject components.
While in different situation you can use different React lifecycle functions to inject your component. Like componentWillReceiveProps or componentWillUpdate.
componentDidMount() {
// dynamically inject a Button component.
System.import('../../../components/Button')
.then((component) => {
// update the state to render the component.
this.setState({
component: component.default,
});
});
}
render() {
let Button = null;
if (this.state.component !== null) {
Button = this.state.component;
}
return (
<div>
{ this.state.component !== null ? <Button>OK</Button> : false }
</div>
);
}
After you edited your code, it should be something similar to below:
class Test extends React.Component {
constructor(props){
super(props)
this.state = { customComponent: null }
this.includeFile = this.includeFile.bind(this);
}
includeFile() {
System.import(this.props.componetFileDir)
.then((component) => {
this.setState({ customComponent: component.default });
});
}
render() {
return(
<div className="card">
<button onClick={this.includeFile}> Load File </button>
{
this.state.customComponent
}
</div>
)
}
}
I'm unable to set a default value of a form w/redux-form. The result I'm looking for is an editable text field to later to submit to the database. i.e. updating an email address.
I've tried setting a property in the form to value or defaultValue.
Note: I've taken repetitive code out to make this easier to read with just a "name" field.
any insight is appreciated!
import React, { Component, PropTypes } from 'react';
import { reduxForm } from 'redux-form';
export const fields = [ 'name']
//(container) page-profile.js
import React, { Component } from 'react';
import { connect } from 'react-redux';
import Profile from '../components/Profile';
class PageProfile extends Component {
render() {
return (
<Profile
userInfo = {this.props.userInfo}
/>
)
}
}
// requiring this page before rendering -- breaks page
PageProfile.propTypes = {
//userInfo: PropTypes.object.isRequired
}
function mapStateToProps(state) {
return {
userInfo : state.auth.userInfo
}
}
// injection to child
export default connect(mapStateToProps, {
})(PageProfile);
// profile.js
export default class Profile extends Component {
render() {
const { fields: {name }, resetForm, handleSubmit, submitting } = this.props
return (
<div>
<img className="image" src={this.props.userInfo.img_url}/>
<form onSubmit={handleSubmit}>
<div>
<div>
<label>name</label>
<div>
<input type="text" defaultValue={this.props.userInfo.name} placeholder="name" {...name}/>
</div>
{name.touched && name.error && <div>{name.error}</div>}
</div>
<button type="submit" disabled={submitting}>
{submitting ? <i/> : <i/>} Submit
</button>
</form>
</div>
)
}
}
Profile.propTypes = {
fields: PropTypes.object.isRequired,
handleSubmit: PropTypes.func.isRequired,
resetForm: PropTypes.func.isRequired,
submitting: PropTypes.bool.isRequired
}
export default reduxForm({
form: 'Profile',
fields,
validate
})(Profile)
You can supply initialValues in reduxForm's mapStateToProps:
const mapFormToProps = {
form: 'Profile',
fields,
validate
};
const mapStateToProps = (state, ownProps) => ({
initialValues: {
name: ownProps.userInfo.name
}
});
reduxForm(
mapFormToProps,
mapStateToProps
)(Profile)
Then just bind like so: <input type="text" placeholder="name" {...name} />.