{"id":4841,"date":"2022-08-24T19:07:24","date_gmt":"2022-08-24T13:37:24","guid":{"rendered":"https:\/\/jassweb.com\/solved\/solved-enable-the-go-to-next-step-button-tried-setting-up-state-and-created-new-onclick-method-in-the-radio-button\/"},"modified":"2022-08-24T19:07:24","modified_gmt":"2022-08-24T13:37:24","slug":"solved-enable-the-go-to-next-step-button-tried-setting-up-state-and-created-new-onclick-method-in-the-radio-button","status":"publish","type":"post","link":"https:\/\/jassweb.com\/solved\/solved-enable-the-go-to-next-step-button-tried-setting-up-state-and-created-new-onclick-method-in-the-radio-button\/","title":{"rendered":"[Solved] enable the go to next step button, tried setting up state and created new onclick method in the radio button"},"content":{"rendered":"

[ad_1]
\n<\/p>\n

\n
\n
<\/div>\n
\n
\n

https:\/\/codesandbox.io\/s\/6zrw7r66rr<\/a><\/p>\n

I have forked your codesandbox, and edit 4 files. Pretty sure it satisfies all your requirements stated above<\/p>\n

VerticalLinearStepper.js: this is where we store our username, password, disabledNext (radioButton)<\/code> state and handleChange<\/code> method for setState<\/code>. Then, we passed down the state to -> Step1.js<\/code> -> AsyncValidationForm.js<\/code>.<\/p>\n

class VerticalLinearStepper extends React.Component {\n  state = {\n    activeStep: 0,\n    \/\/we set our state in this parent\n    disabledNext: true,\n    username: \"\",\n    password: \"\"\n  };\n\n  steps = {\n    \"Select campaign settings\": Step1,\n    \"Create an ad group\": Step2,\n    \"Create an ad\": Step3\n  };\n\n  \/\/setState for disabledNext\n  handleChangeDisabledNext = value => {\n    this.setState({ disabledNext: value });\n  };\n  \/\/setState for username, password\n  handleChange = (name, value) => {\n    this.setState({ [name]: value });\n  };\n\n  stepsCount = () => Object.values(this.steps).length;\n\n  canGoBack = () => this.state.activeStep > 0;\n  canGoForward = () => this.state.activeStep < this.stepsCount();\n\n  isFinished = () => this.state.activeStep === this.stepsCount();\n\n  handleBack = () => {\n    if (this.canGoBack()) {\n      this.setState(prevState => ({ activeStep: prevState.activeStep - 1 }));\n    }\n  };\n\n  handleNext = () => {\n    if (this.canGoForward()) {\n      this.setState(prevState => ({ activeStep: prevState.activeStep + 1 }));\n    }\n  };\n\n  handleReset = () => this.setState({ activeStep: 0 });\n\n  render() {\n    const { classes } = this.props;\n    const { activeStep } = this.state;\n\n    return (\n      <div className={classes.root}>\n        <Stepper activeStep={activeStep} orientation=\"vertical\">\n          {Object.entries(this.steps).map(([label, CustomStep]) => (\n            <Step key={label}>\n              <StepLabel>{label}<\/StepLabel>\n              <StepContent>\n                <CustomStep\n                  canGoBack={this.canGoBack()}\n                  canGoForward={this.canGoForward()}\n                  onBack={this.handleBack}\n                  onNext={this.handleNext}\n                  classes={classes}\n                  \/\/we pass down the state and its' setState method\n                  handleChangeDisabledNext={this.handleChangeDisabledNext}\n                  disabledNext={this.state.disabledNext}\n                  handleChange={this.handleChange}\n                  username={this.state.username}\n                  password={this.state.password}\n                \/>\n              <\/StepContent>\n            <\/Step>\n          ))}\n        <\/Stepper>\n\n        {this.isFinished() && (\n          <Paper square elevation={0} className={classes.resetContainer}>\n            <Typography>All steps completed - you&apos;re finished<\/Typography>\n            <Button onClick={this.handleReset} className={classes.button}>\n              Reset\n            <\/Button>\n          <\/Paper>\n        )}\n      <\/div>\n    );\n  }\n}\n<\/code><\/pre>\n
In AsyncValidationForm.js<\/code>, we bind onChange<\/code> method to track the value and call the setState<\/code> method and this.props.handleChange<\/code> for setState<\/code> in VerticalLinearStepper.js<\/code><\/p>\n
const renderField = ({\n  input,\n  label,\n  type,\n  \/\/checked is for radio, initialValue is for setting the username, password value\n  checked,\n  initialValue,\n  meta: { asyncValidating, touched, error }\n}) => {\n  return (\n    <div>\n      <label>{label}<\/label>\n      <div className={asyncValidating ? \"async-validating\" : \"\"}>\n        <input\n          {...input}\n          value={initialValue} \/\/add value attr\n          checked={checked} \/\/add checked attr\n          type={type}\n          placeholder={label}\n        \/>\n        {touched && error && <span>{error}<\/span>}\n      <\/div>\n    <\/div>\n  );\n};\n\nclass AsyncValidationForm extends React.Component {\n  constructor(props) {\n    super(props);\n    console.log(\"AsyncValidationForm ---->\");\n\n    this.state = {\n      \/\/pass down VerticalLinearStepper.js state if any\n      username: this.props.username ? this.props.username : \"\",\n      password: this.props.password ? this.props.password : \"\",\n      \/\/this determines whether any fields is filled or not from VerticalLinearStepper\n      pristine:\n        this.props.username || this.props.password || !this.props.disabledNext\n          ? false\n          : true\n    };\n  }\n\n  passRadioValue = e => {\n    this.setState({ pristine: false }, () => {\n      this.props.handleChangeDisabledNext(!e.target.checked);\n    });\n  };\n\n  handleChange = name => event => {\n    const value = event.target.value;\n    this.setState(\n      {\n        [name]: value,\n        pristine: false\n      },\n      () => {\n        this.props.handleChange(name, value); \/\/setState username, password of VerticalLinearStepper.js\n      }\n    );\n  };\n\n  resetForm = () => {\n    this.props.handleChangeDisabledNext(true); \/\/setState disabledNext of VerticalLinearStepper.js\n    this.setState(\n      {\n        username: \"\",\n        password: \"\",\n        pristine: true\n      },\n      () => {\n        this.props.handleChange(\"username\", \"\");\n        this.props.handleChange(\"password\", \"\");\n      }\n    );\n\n    this.props.reset();\n  };\n\n  \/\/ this.setState({ disabled: !this.state.disabled });\n\n  render() {\n    const { handleSubmit, pristine, reset, submitting } = this.props;\n\n    return (\n      <form onSubmit={handleSubmit}>\n        <Field\n          name=\"username\"\n          type=\"text\"\n          component={renderField}\n          label=\"Username\"\n          initialValue={this.state.username}\n          onChange={this.handleChange(\"username\")}\n        \/>\n        <Field\n          name=\"password\"\n          type=\"password\"\n          component={renderField}\n          label=\"Password\"\n          initialValue={this.state.password}\n          onChange={this.handleChange(\"password\")}\n        \/>\n\n        <label>\n          <Field\n            name=\"sex\"\n            component={renderField}\n            type=\"radio\"\n            value=\"male\"\n            checked={!this.props.disabledNext}\n            onChange={this.passRadioValue}\n          \/>{\" \"}\n          Male\n        <\/label>\n\n        <div>\n          <button type=\"submit\" disabled={submitting}>\n            Sign Up\n          <\/button>\n          <button\n            type=\"button\"\n            disabled={(pristine || submitting) && this.state.pristine} \/\/add state.pristine checking\n            onClick={this.resetForm}\n          >\n            Clear Values\n          <\/button>\n        <\/div>\n      <\/form>\n    );\n  }\n}\n<\/code><\/pre>\n
Then, in StepTemplate.js<\/code> Add disabledNext, checkDisabledNext<\/code> props. checkDisabledNext<\/code> to determine whether the Next Button will have conditional checking or not. disabledNext<\/code> is the disabled value.<\/p>\n
const StepTemplate = ({\n  classes,\n  canGoBack,\n  canGoForward,\n  onBack,\n  onNext,\n  text,\n  children,\n  \/\/we pass down these 2 values\n  disabledNext,\n  checkDisabledNext\n}) => (\n  <Fragment>\n    <Typography>{text}<\/Typography>\n\n    <div className={classes.actionsContainer}>\n      <div>\n        {children}\n\n        <Button\n          disabled={!canGoBack}\n          onClick={onBack}\n          className={classes.button}\n        >\n          Back\n        <\/Button>\n        <Button\n          variant=\"contained\"\n          color=\"primary\"\n          onClick={onNext}\n          className={classes.button}\n          \/\/determine whether we should check button disabled or not\n          disabled={checkDisabledNext ? disabledNext : false}\n        >\n          {canGoBack ? \"Next\" : \"go to next step\"}\n        <\/Button>\n      <\/div>\n    <\/div>\n  <\/Fragment>\n);\n<\/code><\/pre>\n
This is Step1.js<\/code>, here we just pass props to StepTemplate<\/code> and AsyncValidationForm<\/code>:<\/p>\n
const Step = props => (\n  <StepTemplate\n    text={`\n        For each ad campaign that you create, you can control how much you're\n        willing to spend on clicks and conversions, which networks and\n        geographical locations you want your ads to show on, and more.\n\n        For each ad campaign that you create, you can control how much you're\n        willing to spend on clicks and conversions, which networks and\n        geographical locations you want your ads to show on, and more.\n\n        For each ad campaign that you create, you can control how much you're\n        willing to spend on clicks and conversions, which networks and\n        geographical locations you want your ads to show on, and more.\n\n        For each ad campaign that you create, you can control how much you're\n        willing to spend on clicks and conversions, which networks and\n        geographical locations you want your ads to show on, and more.\n\n        For each ad campaign that you create, you can control how much you're\n        willing to spend on clicks and conversions, which networks and\n        geographical locations you want your ads to show on, and more.\n\n        For each ad campaign that you create, you can control how much you're\n        willing to spend on clicks and conversions, which networks and\n        geographical locations you want your ads to show on, and more.\n\n        For each ad campaign that you create, you can control how much you're\n        willing to spend on clicks and conversions, which networks and\n        geographical locations you want your ads to show on, and more.\n\n        For each ad campaign that you create, you can control how much you're\n        willing to spend on clicks and conversions, which networks and\n        geographical locations you want your ads to show on, and more.\n\n        For each ad campaign that you create, you can control how much you're\n        willing to spend on clicks and conversions, which networks and\n        geographical locations you want your ads to show on, and more.\n\n        For each ad campaign that you create, you can control how much you're\n        willing to spend on clicks and conversions, which networks and\n        geographical locations you want your ads to show on, and more.\n\n        For each ad campaign that you create, you can control how much you're\n        willing to spend on clicks and conversions, which networks and\n        geographical locations you want your ads to show on, and more.\n\n        For each ad campaign that you create, you can control how much you're\n        willing to spend on clicks and conversions, which networks and\n        geographical locations you want your ads to show on, and more.\n    `}\n    \/\/we want to apply checking on Step1.js, so we add checkDisabledNext attribute\n    checkDisabledNext={true}\n    \/\/ disabledNext={this.props.disabledNext} \/\/no need to do this because will be passed with  {...props} below\n    {...props}\n  >\n    <form>\n      form for the first step here\n      <div>test here<\/div>\n      <AsyncValidationForm\n        onSubmit={values => {\n          console.log(values);\n          alert(\n            `Values: username: ${values.username} password: ${values.password}`\n          );\n        }}\n        \/\/these are the props passed down from VerticalLinearStepper.js\n        handleChangeDisabledNext={props.handleChangeDisabledNext}\n        disabledNext={props.disabledNext}\n        handleChange={props.handleChange}\n        username={props.username}\n        password={props.password}\n      \/>\n    <\/form>\n  <\/StepTemplate>\n);\n<\/code><\/pre>\n
Here is the re-render issue fix:
\nhttps:\/\/codesandbox.io\/s\/vqvxj7ky4y<\/a>
\nUpdate VerticalLinearStepper.js<\/code>, then we dont need Step1.js file anymore, since we write the content of Step1.js in this file:<\/p>\n
import React from \"react\";\nimport PropTypes from \"prop-types\";\nimport { withStyles } from \"@material-ui\/core\/styles\";\nimport Stepper from \"@material-ui\/core\/Stepper\";\nimport Step from \"@material-ui\/core\/Step\";\nimport StepLabel from \"@material-ui\/core\/StepLabel\";\nimport StepContent from \"@material-ui\/core\/StepContent\";\nimport Button from \"@material-ui\/core\/Button\";\nimport Paper from \"@material-ui\/core\/Paper\";\nimport Typography from \"@material-ui\/core\/Typography\";\n\n\/\/ import Step1 from \".\/steps\/Step1\";\nimport Step2 from \".\/steps\/Step2\";\nimport Step3 from \".\/steps\/Step3\";\n\nimport StepTemplate from \".\/steps\/StepTemplate\";\nimport AsyncValidationForm from \".\/forms\/AsyncValidationForm\";\n\nconst styles = theme => ({\n  root: {\n    width: \"90%\"\n  },\n  button: {\n    marginTop: theme.spacing.unit,\n    marginRight: theme.spacing.unit\n  },\n  actionsContainer: {\n    marginBottom: theme.spacing.unit * 2\n  },\n  resetContainer: {\n    padding: theme.spacing.unit * 3\n  }\n});\n\nclass VerticalLinearStepper extends React.Component {\n  state = {\n    activeStep: 0,\n    \/\/we set our state in this parent\n    disabledNext: true,\n    username: \"\",\n    password: \"\"\n  };\n\n  steps = {\n    \/\/we pass the content of Step1 here, so we dont have to pass props\n    \"Select campaign settings\": props => (\n      <StepTemplate\n        text={`\n        For each ad campaign that you create, you can control how much you're\n        willing to spend on clicks and conversions, which networks and\n        geographical locations you want your ads to show on, and more.\n\n        For each ad campaign that you create, you can control how much you're\n        willing to spend on clicks and conversions, which networks and\n        geographical locations you want your ads to show on, and more.\n\n        For each ad campaign that you create, you can control how much you're\n        willing to spend on clicks and conversions, which networks and\n        geographical locations you want your ads to show on, and more.\n\n        For each ad campaign that you create, you can control how much you're\n        willing to spend on clicks and conversions, which networks and\n        geographical locations you want your ads to show on, and more.\n\n        For each ad campaign that you create, you can control how much you're\n        willing to spend on clicks and conversions, which networks and\n        geographical locations you want your ads to show on, and more.\n\n        For each ad campaign that you create, you can control how much you're\n        willing to spend on clicks and conversions, which networks and\n        geographical locations you want your ads to show on, and more.\n\n        For each ad campaign that you create, you can control how much you're\n        willing to spend on clicks and conversions, which networks and\n        geographical locations you want your ads to show on, and more.\n\n        For each ad campaign that you create, you can control how much you're\n        willing to spend on clicks and conversions, which networks and\n        geographical locations you want your ads to show on, and more.\n\n        For each ad campaign that you create, you can control how much you're\n        willing to spend on clicks and conversions, which networks and\n        geographical locations you want your ads to show on, and more.\n\n        For each ad campaign that you create, you can control how much you're\n        willing to spend on clicks and conversions, which networks and\n        geographical locations you want your ads to show on, and more.\n\n        For each ad campaign that you create, you can control how much you're\n        willing to spend on clicks and conversions, which networks and\n        geographical locations you want your ads to show on, and more.\n\n        For each ad campaign that you create, you can control how much you're\n        willing to spend on clicks and conversions, which networks and\n        geographical locations you want your ads to show on, and more.\n    `}\n        \/\/we want to apply checking on Step1.js, so we add checkDisabledNext attribute\n        checkDisabledNext={true}\n        disabledNext={this.state.disabledNext} \/\/use this class' state\n        {...props}\n      >\n        <form>\n          form for the first step here\n          <div>test here<\/div>\n          <AsyncValidationForm\n            onSubmit={values => {\n              console.log(values);\n              alert(\n                `Values: username: ${values.username} password: ${\n                  values.password\n                }`\n              );\n            }}\n            \/\/we use this class setstate , no need to pass down props\n            handleChangeDisabledNext={this.handleChangeDisabledNext}\n            disabledNext={this.state.disabledNext}\n            handleChange={this.handleChange}\n            username={this.state.username}\n            password={this.state.password}\n          \/>\n        <\/form>\n      <\/StepTemplate>\n    ),\n    \"Create an ad group\": Step2,\n    \"Create an ad\": Step3\n  };\n\n  \/\/setState for disabledNext\n  handleChangeDisabledNext = value => {\n    this.setState({ disabledNext: value });\n  };\n  \/\/setState for username, password\n  handleChange = (name, value) => {\n    this.setState({ [name]: value });\n  };\n\n  stepsCount = () => Object.values(this.steps).length;\n\n  canGoBack = () => this.state.activeStep > 0;\n  canGoForward = () => this.state.activeStep < this.stepsCount();\n\n  isFinished = () => this.state.activeStep === this.stepsCount();\n\n  handleBack = () => {\n    if (this.canGoBack()) {\n      this.setState(prevState => ({ activeStep: prevState.activeStep - 1 }));\n    }\n  };\n\n  handleNext = () => {\n    if (this.canGoForward()) {\n      this.setState(prevState => ({ activeStep: prevState.activeStep + 1 }));\n    }\n  };\n\n  handleReset = () => this.setState({ activeStep: 0 });\n\n  render() {\n    const { classes } = this.props;\n    const { activeStep } = this.state;\n\n    return (\n      <div className={classes.root}>\n        <Stepper activeStep={activeStep} orientation=\"vertical\">\n          {Object.entries(this.steps).map(([label, CustomStep]) => (\n            <Step key={label}>\n              <StepLabel>{label}<\/StepLabel>\n              <StepContent>\n                <CustomStep\n                  canGoBack={this.canGoBack()}\n                  canGoForward={this.canGoForward()}\n                  onBack={this.handleBack}\n                  onNext={this.handleNext}\n                  classes={classes}\n                \/>\n              <\/StepContent>\n            <\/Step>\n          ))}\n        <\/Stepper>\n\n        {this.isFinished() && (\n          <Paper square elevation={0} className={classes.resetContainer}>\n            <Typography>All steps completed - you&apos;re finished<\/Typography>\n            <Button onClick={this.handleReset} className={classes.button}>\n              Reset\n            <\/Button>\n          <\/Paper>\n        )}\n      <\/div>\n    );\n  }\n}\n\nVerticalLinearStepper.propTypes = {\n  classes: PropTypes.object\n};\n\nexport default withStyles(styles)(VerticalLinearStepper);\n<\/code><\/pre>\n
Additional reference: React: Class Component vs Functional Component<\/a><\/p>\n<\/p><\/div>\n
<\/div>\n<\/div>\n
            3<\/span> <\/p><\/div>\n<\/div>\n
[ad_2]<\/p>\n
solved enable the go to next step button, tried setting up state and created new onclick method in the radio button <\/p>\n","protected":false},"excerpt":{"rendered":"
[ad_1] https:\/\/codesandbox.io\/s\/6zrw7r66rr I have forked your codesandbox, and edit 4 files. Pretty sure it satisfies all your requirements stated above VerticalLinearStepper.js: this is where we store our username, password, disabledNext (radioButton) state and handleChange method for setState. Then, we passed down the state to -> Step1.js -> AsyncValidationForm.js. class VerticalLinearStepper extends React.Component { state = … Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[320],"tags":[346,333,1110,784,1109],"class_list":["post-4841","post","type-post","status-publish","format-standard","hentry","category-solved","tag-html","tag-javascript","tag-material-ui","tag-reactjs","tag-redux"],"yoast_head":"\n[Solved] enable the go to next step button, tried setting up state and created new onclick method in the radio button - JassWeb<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/jassweb.com\/solved\/solved-enable-the-go-to-next-step-button-tried-setting-up-state-and-created-new-onclick-method-in-the-radio-button\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"[Solved] enable the go to next step button, tried setting up state and created new onclick method in the radio button - JassWeb\" \/>\n<meta property=\"og:description\" content=\"[ad_1] https:\/\/codesandbox.io\/s\/6zrw7r66rr I have forked your codesandbox, and edit 4 files. Pretty sure it satisfies all your requirements stated above VerticalLinearStepper.js: this is where we store our username, password, disabledNext (radioButton) state and handleChange method for setState. Then, we passed down the state to -> Step1.js -> AsyncValidationForm.js. class VerticalLinearStepper extends React.Component { state = ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/jassweb.com\/solved\/solved-enable-the-go-to-next-step-button-tried-setting-up-state-and-created-new-onclick-method-in-the-radio-button\/\" \/>\n<meta property=\"og:site_name\" content=\"JassWeb\" \/>\n<meta property=\"article:published_time\" content=\"2022-08-24T13:37:24+00:00\" \/>\n<meta name=\"author\" content=\"Kirat\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kirat\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-enable-the-go-to-next-step-button-tried-setting-up-state-and-created-new-onclick-method-in-the-radio-button\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-enable-the-go-to-next-step-button-tried-setting-up-state-and-created-new-onclick-method-in-the-radio-button\/\"},\"author\":{\"name\":\"Kirat\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\"},\"headline\":\"[Solved] enable the go to next step button, tried setting up state and created new onclick method in the radio button\",\"datePublished\":\"2022-08-24T13:37:24+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-enable-the-go-to-next-step-button-tried-setting-up-state-and-created-new-onclick-method-in-the-radio-button\/\"},\"wordCount\":176,\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"keywords\":[\"html\",\"javascript\",\"material-ui\",\"reactjs\",\"redux\"],\"articleSection\":[\"Solved\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-enable-the-go-to-next-step-button-tried-setting-up-state-and-created-new-onclick-method-in-the-radio-button\/\",\"url\":\"https:\/\/jassweb.com\/solved\/solved-enable-the-go-to-next-step-button-tried-setting-up-state-and-created-new-onclick-method-in-the-radio-button\/\",\"name\":\"[Solved] enable the go to next step button, tried setting up state and created new onclick method in the radio button - JassWeb\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#website\"},\"datePublished\":\"2022-08-24T13:37:24+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-enable-the-go-to-next-step-button-tried-setting-up-state-and-created-new-onclick-method-in-the-radio-button\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/jassweb.com\/solved\/solved-enable-the-go-to-next-step-button-tried-setting-up-state-and-created-new-onclick-method-in-the-radio-button\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-enable-the-go-to-next-step-button-tried-setting-up-state-and-created-new-onclick-method-in-the-radio-button\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/jassweb.com\/solved\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"[Solved] enable the go to next step button, tried setting up state and created new onclick method in the radio button\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/jassweb.com\/solved\/#website\",\"url\":\"https:\/\/jassweb.com\/solved\/\",\"name\":\"JassWeb\",\"description\":\"Build High-quality Websites\",\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/jassweb.com\/solved\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\",\"name\":\"Jass Web\",\"url\":\"https:\/\/jassweb.com\/solved\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png\",\"contentUrl\":\"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png\",\"width\":693,\"height\":132,\"caption\":\"Jass Web\"},\"image\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\",\"name\":\"Kirat\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775193939\",\"contentUrl\":\"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775193939\",\"caption\":\"Kirat\"},\"sameAs\":[\"http:\/\/jassweb.com\"],\"url\":\"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"[Solved] enable the go to next step button, tried setting up state and created new onclick method in the radio button - JassWeb","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/jassweb.com\/solved\/solved-enable-the-go-to-next-step-button-tried-setting-up-state-and-created-new-onclick-method-in-the-radio-button\/","og_locale":"en_US","og_type":"article","og_title":"[Solved] enable the go to next step button, tried setting up state and created new onclick method in the radio button - JassWeb","og_description":"[ad_1] https:\/\/codesandbox.io\/s\/6zrw7r66rr I have forked your codesandbox, and edit 4 files. Pretty sure it satisfies all your requirements stated above VerticalLinearStepper.js: this is where we store our username, password, disabledNext (radioButton) state and handleChange method for setState. Then, we passed down the state to -> Step1.js -> AsyncValidationForm.js. class VerticalLinearStepper extends React.Component { state = ... Read more","og_url":"https:\/\/jassweb.com\/solved\/solved-enable-the-go-to-next-step-button-tried-setting-up-state-and-created-new-onclick-method-in-the-radio-button\/","og_site_name":"JassWeb","article_published_time":"2022-08-24T13:37:24+00:00","author":"Kirat","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Kirat","Est. reading time":"11 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/jassweb.com\/solved\/solved-enable-the-go-to-next-step-button-tried-setting-up-state-and-created-new-onclick-method-in-the-radio-button\/#article","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/solved-enable-the-go-to-next-step-button-tried-setting-up-state-and-created-new-onclick-method-in-the-radio-button\/"},"author":{"name":"Kirat","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31"},"headline":"[Solved] enable the go to next step button, tried setting up state and created new onclick method in the radio button","datePublished":"2022-08-24T13:37:24+00:00","mainEntityOfPage":{"@id":"https:\/\/jassweb.com\/solved\/solved-enable-the-go-to-next-step-button-tried-setting-up-state-and-created-new-onclick-method-in-the-radio-button\/"},"wordCount":176,"publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"keywords":["html","javascript","material-ui","reactjs","redux"],"articleSection":["Solved"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/jassweb.com\/solved\/solved-enable-the-go-to-next-step-button-tried-setting-up-state-and-created-new-onclick-method-in-the-radio-button\/","url":"https:\/\/jassweb.com\/solved\/solved-enable-the-go-to-next-step-button-tried-setting-up-state-and-created-new-onclick-method-in-the-radio-button\/","name":"[Solved] enable the go to next step button, tried setting up state and created new onclick method in the radio button - JassWeb","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/#website"},"datePublished":"2022-08-24T13:37:24+00:00","breadcrumb":{"@id":"https:\/\/jassweb.com\/solved\/solved-enable-the-go-to-next-step-button-tried-setting-up-state-and-created-new-onclick-method-in-the-radio-button\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/jassweb.com\/solved\/solved-enable-the-go-to-next-step-button-tried-setting-up-state-and-created-new-onclick-method-in-the-radio-button\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/jassweb.com\/solved\/solved-enable-the-go-to-next-step-button-tried-setting-up-state-and-created-new-onclick-method-in-the-radio-button\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/jassweb.com\/solved\/"},{"@type":"ListItem","position":2,"name":"[Solved] enable the go to next step button, tried setting up state and created new onclick method in the radio button"}]},{"@type":"WebSite","@id":"https:\/\/jassweb.com\/solved\/#website","url":"https:\/\/jassweb.com\/solved\/","name":"JassWeb","description":"Build High-quality Websites","publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/jassweb.com\/solved\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/jassweb.com\/solved\/#organization","name":"Jass Web","url":"https:\/\/jassweb.com\/solved\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/","url":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","contentUrl":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","width":693,"height":132,"caption":"Jass Web"},"image":{"@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31","name":"Kirat","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/image\/","url":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775193939","contentUrl":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775193939","caption":"Kirat"},"sameAs":["http:\/\/jassweb.com"],"url":"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/"}]}},"_links":{"self":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/4841","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/comments?post=4841"}],"version-history":[{"count":0,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/4841\/revisions"}],"wp:attachment":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/media?parent=4841"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/categories?post=4841"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/tags?post=4841"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}