Tips for transferring properties from one React component to another React component

Question

Tips for transferring properties from one React component to another React component

I need to figure out how to activate a button in a modal when text is entered into an input field. The form is part of a different class and is utilized within a parent class. How can I pass an onChange method to my form component?

Check out the code for the parent component below:

import React from 'react';
import {
  Button,
  Dialog,
  DialogActions,
  DialogContent,
  DialogTitle
} from '@material-ui/core';
import CompanyFinancialModalForm from '../CompanyFinancialModalForm/CompanyFinancialModalForm';

interface CompanyFinancialModalState {
  addEnabled: boolean;
}

interface CompanyFinancialModalProps {
  open: boolean;
  onClose: () => void;
}

export class CompanyFinancialModal extends React.Component<
  CompanyFinancialModalProps,
  CompanyFinancialModalState
> {
  constructor(props: CompanyFinancialModalProps) {
    super(props);

    this.state = {
      addEnabled: false
    };
  }

  private enableButton = () => {
    this.setState({ addEnabled: true});
  }

  public render() {
    const { open, onClose } = this.props;
    const { addEnabled } = this.state;
    return (
      <>
        <Dialog
          open={open}
          onClose={onClose}
          className="company-financial-modal"
        >
          <DialogTitle id="company-financial-modal-title">
            {'Company and Financial Data'}
          </DialogTitle>
          <DialogContent>
            <CompanyFinancialModalForm onChange={this.enableButton}/>
          </DialogContent>
          <DialogActions>
            <Button
              id="company-financial-modal-add"
              disabled={!addEnabled}
              onClick={onClose}
              color="primary"
            >
              Add
            </Button>
            <Button
              id="company-financial-modal-cancel"
              onClick={onClose}
              color="secondary"
              autoFocus={true}
            >
              Cancel
            </Button>
          </DialogActions>
        </Dialog>
      </>
    );
  }
}

export default CompanyFinancialModal;

Now let's take a look at the class where the form resides:

import React from 'react';
import axios from 'axios';
import { Form, Field } from 'react-final-form';
import { TextField, Select } from 'final-form-material-ui';
import {
  Paper,
  Grid,
  MenuItem,
} from '@material-ui/core';

export interface IValues {
  company_name: string;
  critical_technology: [];
}
export interface IFormState {
  [key: string]: any;
  values: IValues[];
  submitSuccess: boolean;
}

export default class CompanyFinancialModalForm extends React.Component<{}, IFormState> {
  constructor(props: {}) {
    super(props);
    this.state = {
      company_name: '',
      critical_technology: [],
      values: [],
      submitSuccess: false
    };
  }

  private processFormSubmission = (e: React.FormEvent<HTMLFormElement>): void => {
    e.preventDefault();
    this.setState({ loading: true });
    const formData = {
      company_name: this.state.company_name,
      critical_technology: this.state.critical_technology
    };
    this.setState({
      submitSuccess: true,
      values: [...this.state.values, formData],
      loading: false
    });
    axios.post(`http://localhost:8081/companies`, formData);
  }

  private onChange = (e: React.FormEvent<HTMLInputElement>) => {
    const { name, value } = e.target;
    // other form-related logic
    this.props.onChange({ name, value }, e);
  }

  public render() {
    const { submitSuccess, loading } = this.state;
    const { onChange } = this.props;
    return (
      <div>
        <Form
          onSubmit={this.processFormSubmission}
          // validate={this.validateForm}
          render={({ handleSubmit,/*  reset,  submitting, pristine, values*/ }) => (
          <form onSubmit={handleSubmit} noValidate>
            <Paper style={{ padding: 16 }}>
              <Grid container alignItems="flex-start" spacing={2}>
                <Grid item xs={6}>
                  <Field
                    fullWidth
                    required
                    name="companyName"
                    component={TextField}
                    type="text"
                    label="Company Name"
                    onChange={onChange}
                  />
                </Grid>                
                <Grid item xs={12}>
                  <Field
                    name="critical_technology"
                    label="Critical Technology"
                    component={Select as any}
                  >
                    <MenuItem value="hypersonics">Hypersonics</MenuItem>
                    <MenuItem value="directed_energy">Directed Energy</MenuItem>
                    <MenuItem value="command_control_and_communications">Command, Control and Communications </MenuItem>
                    <MenuItem value="space_offense_and_defense">Space Offense and Defense</MenuItem>
                    <MenuItem value="cybersecurity">Cybersecurity</MenuItem>
                    <MenuItem value="artificial_intelligence_machine_learning">Artificial Intelligence/Machine Learning</MenuItem>
                    <MenuItem value="missile_defense">Missile Defense</MenuItem>
                    <MenuItem value="quantum_science_and_computing">Quantum Science and Computing </MenuItem>
                    <MenuItem value="microelectronics">Microelectronics</MenuItem>
                    <MenuItem value="autonomy">Autonomy</MenuItem>
                  </Field>
                </Grid>
              </Grid>
            </Paper>
          </form>
        )}</Form>
      </div>
    );
  }
}

The goal is to send a prop to

<CompanyFinancialModalForm />

that will trigger the add button once some text is entered into the Textfield.

javascript reactjs material-ui react-final-form

Answer 1

Answer №1

It would be more helpful in the future to only provide the relevant code, as it can be time-consuming to sift through unnecessary code:

While I may not fully grasp your query, here's my attempt at answering what I believe you are seeking. You can implement an onChange method in the parent component and pass it down as a prop to the form. This way, the form can invoke that function whenever its own onChange event occurs. Below is a simplified example:

class Parent extends Component {
  state = { 
    buttonEnabled: false,
    // formInputValue: '', <-- if needed
  };

  
  onChange({ name, value }, e) {
    // Determine logic to enable or disable the button
    // My assumption of the desired behavior
    if (value) this.setState({ buttonEnabled: true });
    else this.setState({ buttonEnabled: false });
  }

  render() {
    return (
      <Fragment>
        <YourForm onChange={this.onChange} />
        <Button enabled={this.state.buttonEnabled} />
      </Fragment>
    );
  }
}

class YourForm extends Component {
  onChange(e) {
    const { name, value } = e.target;
    // Additional form-related operations
    this.props.onChange({ name, value }, e);
  }
}

Does this align with what you were searching for?

Answer 2

It would be more helpful in the future to only provide the relevant code, as it can be time-consuming to sift through unnecessary code:

While I may not fully grasp your query, here's my attempt at answering what I believe you are seeking. You can implement an onChange method in the parent component and pass it down as a prop to the form. This way, the form can invoke that function whenever its own onChange event occurs. Below is a simplified example:

class Parent extends Component {
  state = { 
    buttonEnabled: false,
    // formInputValue: '', <-- if needed
  };

  
  onChange({ name, value }, e) {
    // Determine logic to enable or disable the button
    // My assumption of the desired behavior
    if (value) this.setState({ buttonEnabled: true });
    else this.setState({ buttonEnabled: false });
  }

  render() {
    return (
      <Fragment>
        <YourForm onChange={this.onChange} />
        <Button enabled={this.state.buttonEnabled} />
      </Fragment>
    );
  }
}

class YourForm extends Component {
  onChange(e) {
    const { name, value } = e.target;
    // Additional form-related operations
    this.props.onChange({ name, value }, e);
  }
}

Does this align with what you were searching for?

Answer 3

Answer №2

In order to validate and enable a button based on input in React, you can pass a reference to a function from the parent component to a child component. The parent's function can then handle the validation logic for enabling/disabling the button.

Check out a demo on CodeSandbox

Here is a simplified version of the code:

function Child (props) {
  return (
    <input type="text" onChange={props.doIt}/>
  )
}

function App() {
 const [disabled, setDisabled] = useState(true);

 function doIt(e) {
     setDisabled(e.currentTarget.value.length === 0);
 }
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <Child doIt={doIt} />
      <button disabled={disabled}>Add</button>
    </div>
  );
}

Answer 4

In order to validate and enable a button based on input in React, you can pass a reference to a function from the parent component to a child component. The parent's function can then handle the validation logic for enabling/disabling the button.

Check out a demo on CodeSandbox

Here is a simplified version of the code:

function Child (props) {
  return (
    <input type="text" onChange={props.doIt}/>
  )
}

function App() {
 const [disabled, setDisabled] = useState(true);

 function doIt(e) {
     setDisabled(e.currentTarget.value.length === 0);
 }
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <Child doIt={doIt} />
      <button disabled={disabled}>Add</button>
    </div>
  );
}

Tips for transferring properties from one React component to another React component

Answer №1

Answer №2

Similar questions

When attempting to check and uncheck checkboxes with a specific class, the process fails after the first uncheck

Store images securely in a private S3 bucket for access with Next.js

Having trouble accessing TreeView Icons and IconButton in my testing environment

Is there a way to enlarge images when hovered using canvas?

Shifting an element to the right before revealing or concealing it with Jquery Show/Hide

There seems to be an issue with the hydration process in NextJS when using styled-components with a component

The ant layout slider collapsible feature is unable to be utilized in conjunction with SSR in NextJs

Ways to prevent the component from rendering until the ajax call has finished in reactjs

Mastering regular expressions in TypeScript

Issue with displaying nested React Elements from Component

MUI: Autocomplete received an invalid value. None of the options correspond to the value of `0`

"Encountering issues with react-swipable-views when attempting to use it

Issue: $controller:ctrlreg The controller named 'HeaderCntrl' has not been properly registered

What steps can you take to resolve the "TypeError: Cannot read property 'id' of undefined" issue?

Understanding the mechanics of utilizing node modules and requiring them within an Express 4 router

Ways to emphasize search outcomes in Flask/HTML?

A chosen class containing a nested class that utilizes the makeStyles function

Is there a way to implement full-page scrolling in Vue?

Error encountered in Angular $injector:unpr while attempting to initialize uibModal

Error Encountered: AngularJS Form Email - SyntaxError: An unexpected token '<' was found in the code