I am trying to have a button enabled in a modal when text is entered in an input field. But my form is built in another class and is used in a parent class. How can I pass an onChange method my form component.
Here is my parent component:
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;
Here is my class that my form is in:
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>
)}
/>
</div>
);
}
}
I want to pass a prop to <CompanyFinancialModalForm /> that enables the add button when the Textfield has text typed into it.
For future reference, it will be more beneficial if you only include the relevant code, because it takes more time to find when scrolling through irrelevant code, anyways:
I'm not 100% clear on what you're looking for, but I'll try to answer what I think I understand. You can add an onChange method on your parent component, and pass that as a prop to the form, and the form can call that function every time it runs it's own onChange method. Below is a simplified version:
class Parent extends Component {
state = {
buttonEnabled: false,
// formInputValue: '', <-- if you need this
};
// - omitting constructor/bind for simplicity for now
onChange({ name, value }, e) {
// your logic to determine whether button is enabled or not
// this is just me guessing what you want to implement
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;
// other form-related logic
this.props.onChange({ name, value }, e);
}
}
is this what you're looking for?
You can simply pass a child a reference to a function that exists in the parent and then use the parent's function to validate and enable the button.
Codesandbox Demo
Simplified 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>
);
}
Related
I have a form that uses accordion component.
When I print values using watch() then collapse accordion. the values get deleted from inputs when I open it again.
This behaviour is not happening when I don't use watch()
I would like to know why this is happening ? watch() should only listen to data as I know.
CodeSandbox
CreateTest.ts
import { QuestionCreatingForm } from "./QuestionForm";
import {
AccordionHeader,
AccordionItem,
AccordionPanel,
Accordion
} from "#fluentui/react-components";
import { Button, Form } from "#fluentui/react-northstar";
import { useFieldArray, useForm } from "react-hook-form";
export function CreateTest() {
const methods = useForm();
const { control, register, handleSubmit, watch } = methods;
const { fields, append } = useFieldArray({
control,
name: "questions"
});
const addQuestion = (event: any) => {
event.preventDefault();
append({ name: "" });
};
const onSubmit = (data: any) => {
alert(JSON.stringify(data));
};
return (
<div className="w-8/12 m-auto">
{JSON.stringify(watch())}
<Form onSubmit={handleSubmit(onSubmit)}>
{fields.map((field, index) => (
<Accordion key={field.id} collapsible>
<AccordionItem value="1">
<AccordionHeader>Accordion Header </AccordionHeader>
<AccordionPanel>
<QuestionCreatingForm
fieldId={field.id}
index={index}
{...{ control, register, watch }}
/>
</AccordionPanel>
</AccordionItem>
</Accordion>
))}
<Button
className="my-10"
content="Add question"
primary
fluid
onClick={addQuestion}
/>
<Button
className="my-10"
fluid
content="submit"
primary
type="submit"
/>
</Form>
{/* </FormProvider> */}
</div>
);
}
QuestionForm.ts
import {
Button,
Divider,
FormCheckbox,
FormInput,
TrashCanIcon
} from "#fluentui/react-northstar";
import { SyntheticEvent } from "react";
import {
Control,
FieldValues,
useFieldArray,
UseFormRegister,
UseFormWatch
} from "react-hook-form";
export function QuestionCreatingForm({
index,
fieldId,
control,
register,
watch
}: {
index: number;
fieldId: string;
control: Control<FieldValues, any>;
register: UseFormRegister<FieldValues>;
watch: UseFormWatch<FieldValues>;
}) {
const { fields, append, remove } = useFieldArray({
control,
name: `questions.${index}.responses`
});
const addResponse = (event: SyntheticEvent<HTMLElement, Event>) => {
event.preventDefault();
append({ name: "" });
};
const deleteResponse = (index: number) => {
remove(index);
};
return (
<>
<FormInput
label="Question"
required
fluid
key={index}
{...register(`questions.${index}.name` as const)}
/>
<div className="w-10/12 m-auto">
{fields.map((field, i) => (
<div className="flex w-full">
<FormCheckbox />
<div className="w-full" key={field.id}>
<FormInput
{...register(`questions.${index}.responses.${i}.name` as const)}
defaultValue=""
label={`reponses ${i + 1}`}
required
fluid
/>
</div>
<Button
text
styles={{ color: "red", placeSelf: "end" }}
icon={<TrashCanIcon />}
onClick={(e) => deleteResponse(i)}
iconOnly
/>
</div>
))}
<Button
content="Ajouter une réponse"
tinted
fluid
onClick={addResponse}
/>
</div>
<Divider />
</>
);
}
I am creating a simple application using react and I have two components: Form and Modal. The Modal should be opened when the Form is submitted. How to change the state of the Modal component to achieve this ?
This is the code for the Form.js compent:
import Modal from './Modal'
export default function Form() {
const handleSubmit = (e) => {
e.preventDefault()
}
return (
<form onSubmit={handleSubmit}>
<SuccessModal />
<div className='mt-1'>
...
</form>
)}
This is the code for the Modal.js compent:
export default function Modal() {
const [open, setOpen] = useState(false)
return (
<Transition.Root show={open} as={Fragment}>
<Dialog
as='div'
static
open={open}
onClose={setOpen}
>
...
</Dialog>
</Transition.Root>
I tried to pass this state as a property, but I think I'm doing something wrong. I would be very grateful if any of you could explain to me the principle of how this works.
You can have modal state in Form.js and then pass the state as props to Modal.js.
On Form submit set the modal state.
Form.js
import Modal from './Modal'
export default function Form() {
const [open, setOpen] = useState(false)
const handleSubmit = (e) => {
e.preventDefault()
...
setOpen(true);
}
return (
<>
<form onSubmit={handleSubmit}>
<SuccessModal />
<div className='mt-1'>
...
</form>
{open && <Modal open={open} setOpen={setOpen} />}
</>
)}
Modal.js
export default function Modal({ open, setOpen }) {
return (
<Transition.Root show={open} as={Fragment}>
<Dialog
as='div'
static
open={open}
onClose={setOpen}
>
...
</Dialog>
</Transition.Root>
the state controller useState should be in the parent, not the Modal.
Then you can simply use a prop to define the open state.
One way we do this at my work is creating a custom hook for it:
// stateless modal component
export default function Modal({ open }) {
return (
<Transition.Root show={open} as={Fragment}>
<Dialog
as='div'
static
open={open}
onClose={setOpen}
>
...
</Dialog>
</Transition.Root>
}
// custom hook
export function useModal({ initialState }) {
const [open, setOpen] = useState(initialState)
return {
component: <Modal open={open} />,
setOpen,
}
}
// parent code
import { useModal } from './Modal'
export default function Form() {
const modal = useModal(false)
const handleSubmit = (e) => {
e.preventDefault()
modal.setOpen(true)
}
return (
<form onSubmit={handleSubmit}>
{modal.component}
<div className='mt-1'>
...
</form>
)}
You can try lifting the state of the child (Modal) to the state of the parent (Form). Refer this
You don't use state for show or hide Modal component. Use the props. With props components will be working like this:
import Modal from './Modal'
interface IFormProps {}
interface IFormState {
isModalOpen: boolean
}
export class Form extends React.Component<IFormProps, IFormState> => {
state: IFormState = {
isModalOpen: false,
}
const handleSubmit = (e): void => {
this.setState({ isModalOpen: true })
e.preventDefault()
}
const handleModalClose = (): boolean => {
this.setState({ isModalOpen: false })
}
return (
<form onSubmit={handleSubmit}>
<Modal isOpen={this.state.isModalOpen} handleClose={this.handleModalClose} />
<div className='mt-1'>
...
</form>
)}
interface IModalProps {
isOpen: boolean
handleClose: () => boolean
}
interface IModalState {}
export class Modal extends React.Compnent<IModalProps, IModalState> {
const { isOpen, handleClose } = this.props
return (
<Transition.Root show={isOpen} as={Fragment}>
<Dialog
as='div'
static
open={isOpen}
onClose={handleClose}
>
...
</Dialog>
</Transition.Root>
So I am stumped I am trying to enable the Add button in this Material UI dialog once text is typed in a specific input called company_name. I have an addEnable boolean state value. I initially set the state to addEnable to false. Then I am using an handleInputChanges for my onChange event for the company_name input field. In that handleInputChanges I use the prevState of the addEnable to set it to true. But the button is not being enabled.
import React from 'react';
import axios from 'axios';
import {
Button,
Dialog,
DialogActions,
DialogContent,
DialogTitle,
Paper,
Grid,
MenuItem
} from '#material-ui/core';
import { Form, Field } from 'react-final-form';
import { TextField, Select } from 'final-form-material-ui';
interface CompanyFinancialModalState {
addEnabled: boolean;
[key: string]: any;
values: IValues[];
}
export interface IValues {
company_name: string;
critical_technology: string[];
}
interface CompanyFinancialModalProps {
open: boolean;
onClose: () => void;
}
export class CompanyFinancialModal extends React.Component<
CompanyFinancialModalProps,
CompanyFinancialModalState
> {
constructor(props: CompanyFinancialModalProps) {
super(props);
this.state = {
addEnabled: false,
company_name: '',
critical_technology: [],
values: []
};
}
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>
<div>
<Form
onSubmit={this.processFormSubmission}
// validate={this.validateForm}
// tslint:disable-next-line jsx-no-lambda
render={({
handleSubmit,
/* reset, submitting, pristine, */ values
}) => (
<form onSubmit={handleSubmit}>
<Paper style={{ padding: 16 }}>
<Grid container={true} alignItems="flex-start" spacing={2}>
<Grid item={true} xs={12}>
<Field
fullWidth={true}
required={true}
name="company_name"
component={TextField}
type="text"
label="Company Name"
onChange={this.handleInputChanges}
/>
</Grid>
</Grid>
</Paper>
</form>
)}
/>
</div>
</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>
</>
);
}
private handleInputChanges = (e: React.FormEvent<HTMLInputElement>) => {
e.preventDefault();
this.setState({ [e.currentTarget.name]: e.currentTarget.value });
this.setState((prevState) => {
return { addEnabled: prevState.addEnabled }
})
}
}
export default CompanyFinancialModal;
Try using this code Change the button to
<Button id="company-financial-modal-add" disabled={this.state.addEnabled} >
</>
And also change the state as addEnabled to true
handleInputChanges=(e)={ if(e.target.value===""){ this.setState( { addEnabled:true } ) }
else{ this.setState( {
addEnabled:false } ) } }
If you use prevState when handleInputChanges would be triggered for the second time the button will be disabled again wheras you want the button to be always enabled once there is some input in company_name field.
return { addEnabled: true }
The function would look like this then
private handleInputChanges = (e: React.FormEvent<HTMLInputElement>) => {
e.preventDefault();
this.setState({ [e.currentTarget.name]: e.currentTarget.value });
this.setState((prevState) => {
return { addEnabled: true }
})
}
Aren't you giving assigning the same value to the addEnabled state on your handleInputChanges function?
This should work
private handleInputChanges = (e: React.FormEvent<HTMLInputElement>) => {
e.preventDefault();
this.setState({ [e.currentTarget.name]: e.currentTarget.value });
if (e.currentTarget.value !== "") this.setState(prevState => ({ addEnabled: true }))
else this.setState(prevState => ({ addEnabled: false }))
}
}
I'm building a reusable form in React to be used as login and signin forms in may app.
I'm using Axios to send the data to the database.
But I can't send the input values as props to my UserSignIn component to use them in a function with Axios. Here's the code :
How do I get these props ? Thanks
AccountForm component :
import React, { Component } from "react";
import {Grid,Input, InputLabel, FormControl, Typography, Button, Paper,
} from "#material-ui/core";
class AccountForm extends Component {
constructor(props) {
super(props);
this.state = {
userSignUpName: "",
userSignUpEmail: ""
}
handleChange(e) {
this.setState({
[e.target.id]: e.target.value
});
}
render() {
const {
classes,
formType,
onCreateAccount,
onSubmit,
onBlurCheck,
message,
title
} = this.props;
const {
userSignUpName,
userSignUpEmail,
} = this.state;
return (
<div>
<Grid container justify="center">
<Grid item xs={10}>
<Paper>
<form
onChange={e => this.handleChange(e)}
onSubmit={onSubmit}
>
<Typography variant="subheading" color="primary"
align="center">
{title}
</Typography>
{formType === "signin" && (
<FormControl>
<InputLabel htmlFor="name">Nom</InputLabel>
<Input id="userSignUpName" name="name" type="text" />
</FormControl>
)}
<FormControl>
<InputLabel htmlFor="email">Email</InputLabel>
<Input id="userSignUpEmail" type="email" name="email" />
</FormControl>
</form>
</Paper>
</Grid>
</Grid>
</div>
);
}
}
export default AccountForm;
UserSignIn component :
import React, { Component } from "react";
import axios from "axios";
import config from "../../assets/lib/axiosConfig";
import { AccountForm } from "./Index";
class UserSignIn extends Component {
constructor(props) {
super(props);
this.state = {
formType: "signin",
title: "Create account"
};
}
handleSubmit(e) {
e.preventDefault();
axios(
config(
{
name: this.props.userSignUpName,
email: this.props.userSignUpEmail,
},
"/createAccount",
"post"
)
).then(res => {
const { success, error, token } = res.data;
if (success) {
localStorage.setItem("AuthToken", token);
this.props.redirectTo();
}
if (error) {
this.setState({ message: error });
}
});
}
render() {
const { prevPath, history, userSignUpName } = this.props;
// I can't get userSignUpName props
const { formType, message, title } = this.state;
return (
<AccountForm
{...this.props}
title={title}
onSubmit={e => this.handleSubmit(e)}
formType={formType}
redirectTo={
prevPath !== null && prevPath === "/mycart"
? () => history.push("/payment")
: () => history.push("/")
}
/>
);
}
}
export default UserSignIn;
Thanks
You can pass form data as handleSubmit parameters
AccountForm component :
<form
onChange={e => this.handleChange(e)}
onSubmit={(e) => {
e.preventDefault()
onSubmit({
userSignUpName: this.state.userSignUpName,
userSignUpEmail: this.state.userSignUpEmail,
})
}}
>
UserSignIn component :
handleSubmit(params) {
axios(
config(
{
name: params.userSignUpName,
email: params.userSignUpEmail,
},
//....
}
I'm trying to develop a fairly simplistic E-Mail template creator with React JS. I'm using the "react-sortable-hoc" library as a means to handle the ordering of elements on the page.
The goal is to allow users to create "Rows", rearrange rows, and within each row, have multiple "Columns" that can contain components like images, textboxes, etc...
But I keep running into the same issue with Sortable libraries. Form fields cannot maintain their own "state" when being dragged up or down. The State of a Component in React JS seems to be lost when it's in a draggable component. I've experienced similar issues with JQuery UI's Sortable but it required an equally ridiculous solution. Is it common to find that form fields are simply super difficult to rearrange?
As a "proof of concept", I am using a complex JSON object that stores all the information in the Letter.js component and passes it down as Props which are then passed down to each component. But as you can tell, this is becoming cumbersome.
Here is an example of my Letter component that handles the JSON object and sorting of Rows:
import React, {Component} from 'react';
import {render} from 'react-dom';
import {
SortableContainer,
SortableElement,
arrayMove
} from 'react-sortable-hoc';
import Row from './Row';
const SortableItem = SortableElement(({row, rowIndex, onChange, addPart}) => {
return (
<li>
<Row
row={row}
rowIndex={rowIndex}
onChange={onChange}
addPart={addPart} />
</li>
)
});
const SortableList = SortableContainer(({rows, onChange, addPart}) => {
return (
<ul id="sortableList">
{rows.map((row, index) => {
return (
<SortableItem
key={`row-${index}`}
index={index}
row={row}
rowIndex={index}
onChange={onChange}
addPart={addPart}
/> )
})}
</ul>
);
});
class Letter extends Component {
constructor(props) {
super(props);
this.state = {
rows: [],
}
this.onSortEnd = this.onSortEnd.bind(this);
this.onChange = this.onChange.bind(this);
this.addRow = this.addRow.bind(this);
this.addPart = this.addPart.bind(this);
}
addPart(event, index, value, rowIndex, columnIndex) {
console.log(value);
var part = {};
if(value === 'Text') {
part = {
type: 'Text',
value: ''
}
} else if(value === 'Image') {
part = {
type: 'Image',
value: ''
}
} else {
part = {
type: 'Empty',
}
}
const { rows } = this.state;
rows[rowIndex][columnIndex] = part;
this.setState({ rows: rows })
}
onChange(text, rowIndex, columnIndex) {
const { rows } = this.state;
const newRows = [...rows];
newRows[rowIndex][columnIndex].value = text;
this.setState({ rows: newRows });
}
addRow(columnCount) {
var rows = this.state.rows.slice();
var row = [];
for(var i = 0; i < columnCount; i++) {
var part = {
type: 'Empty',
}
row.push(part);
}
rows.push(row);
this.setState({ rows: rows })
}
onSortEnd = ({oldIndex, newIndex}) => {
this.setState({
rows: arrayMove(this.state.rows, oldIndex, newIndex),
});
};
render() {
console.log(JSON.stringify(this.state.rows));
const SideBar = (
<div className="sideBar">
<h3>Add a Row</h3>
<button className="uw-button" onClick={() => this.addRow(1)}>1 - Column</button><br/><br/>
<button className="uw-button" onClick={() => this.addRow(2)}>2 - Column</button><br/><br/>
<button className="uw-button" onClick={() => this.addRow(3)}>3 - Column</button>
<hr />
</div>
);
if(this.state.rows.length <= 0) {
return (
<div className="grid">
<p>This E-Mail is currently empty! Add some components to make a template.</p>
{SideBar}
</div>
)
}
return (
<div className="grid">
<SortableList
rows={this.state.rows}
onChange={this.onChange}
addPart={this.addPart}
lockAxis="y"
useDragHandle={true}
onSortStart={this.onSortStart}
onSortMove={this.onSortMove}
onSortEnd={this.onSortEnd}
shouldCancelStart={this.shouldCancelStart} />
{SideBar}
</div>
);
}
}
export default Letter;
And here is an example of Row:
import React, { Component } from 'react';
import { Text, Image } from './components/';
import { SortableHandle } from 'react-sortable-hoc';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import { Card, CardActions, CardHeader, CardMedia, CardTitle, CardText } from 'material-ui/Card';
import DropDownMenu from 'material-ui/DropDownMenu';
import MenuItem from 'material-ui/MenuItem';
const DragHandle = SortableHandle(() => <span className="dragHandle"></span>);
class Row extends Component {
constructor(props) {
super(props);
}
render() {
if(this.props.row !== undefined && this.props.row.length > 0) {
const row = this.props.row.map((column, columnIndex) => {
if(column.type === 'Empty') {
return (
<MuiThemeProvider key={columnIndex}>
<div className="emptyColumn">
<Card>
<DragHandle />
<CardTitle title="Empty Component"/>
<DropDownMenu value={"Empty"} onChange={(event, index, value) => this.props.addPart(event, index, value, this.props.rowIndex, columnIndex)}>
<MenuItem value={"Empty"} primaryText="Empty" />
<MenuItem value={"Text"} primaryText="Textbox" />
<MenuItem value={"Image"} primaryText="Image" />
</DropDownMenu>
</Card>
</div>
</MuiThemeProvider>
)
} else if(column.type === 'Text') {
return (
<MuiThemeProvider key={columnIndex}>
<div className="textColumn">
<Card>
<DragHandle />
<CardTitle title="Textbox"/>
<DropDownMenu value={"Text"} onChange={(event, index, value) => this.props.addPart(event, index, value, this.props.rowIndex, columnIndex)}>
<MenuItem value={"Empty"} primaryText="Empty" />
<MenuItem value={"Text"} primaryText="Textbox" />
<MenuItem value={"Image"} primaryText="Image" />
</DropDownMenu>
<Text
value={this.props.row[columnIndex].value}
onChange={this.props.onChange}
columnIndex={columnIndex}
rowIndex={this.props.rowIndex} />
</Card>
</div>
</MuiThemeProvider>
)
} else if(column.type === 'Image') {
return (
<MuiThemeProvider key={columnIndex}>
<div className="textColumn">
<Card>
<DragHandle />
<CardTitle title="Image"/>
<DropDownMenu value={"Image"} onChange={(event, index, value) => this.props.addPart(event, index, value, this.props.rowIndex, columnIndex)}>
<MenuItem value={"Empty"} primaryText="Empty" />
<MenuItem value={"Text"} primaryText="Textbox" />
<MenuItem value={"Image"} primaryText="Image" />
</DropDownMenu>
<Image
columnIndex={columnIndex}
rowIndex={this.props.rowIndex} />
</Card>
</div>
</MuiThemeProvider>
)
}
})
return (
<div className="row">
{row}
</div>
)
}
return <p>No components</p>;
}
}
export default Row;
Lastly, this is what Text.js looks like
import React, { Component } from 'react';
import ReactQuill from 'react-quill';
class Text extends Component {
constructor(props) {
super(props);
}
render() {
return (
<ReactQuill value={this.props.value}
onChange={(text) => this.props.onChange(text, this.props.rowIndex, this.props.columnIndex)} />
)
}
}
export default Text;
So, I keep having to pass ridiculous parameters to onChange functions and other functions in order to ensure that the state is maintained while sorting and editing. So, how should I be handling this? I don't want Letter.js (which is basically App.js) to handle all of my data handling. I want each component to handle it's own. I want Text.js to handle the onChange effects of its text. But I just can't see a way around passing everything down as props.