I'm new to React and going through a course online. I came across this issue, where i wanted to enable or disable a button based on values present in the text field. If it is create/edit option then submit button should be disabled by default but if any value is entered or edited the submit button should be enabled.
2 Answers
if you want to enable or disable your button on condition base then all you have to do is add ternary operator in your jsx like this
<button id='my_button' disabled ={(activityChanged)?true:false}>Click Me</button>
Comments
This is what I tried. Created const [activityChanged, setActivityChanged] = useState(false); by keeping the initial value of activityChanged to false. And applied disabled attribute to the button as shown below.
<Button
disabled={!activityChanged}
loading={submitting}
floated="right"
positive
type="submit"
content="Submit"
/>
And updated the value of activityChanged on onChange event of text input as shown below
const handleInputChange = (
event: FormEvent<HTMLInputElement | HTMLTextAreaElement>
) => {
const { name, value } = event.currentTarget;
setActivity({ ...activity, [name]: value });
setActivityChanged(true)
};
Below is the complete code:
import React, { FormEvent, useState } from "react";
import { Button, Form, Segment } from "semantic-ui-react";
import { IActivity } from "../../../app/models/activity";
import { v4 as uuid } from "uuid";
interface IProps {
setEditMode: (editMode: boolean) => void;
activity: IActivity;
createActivity: (activity: IActivity) => void;
editActivity: (activity: IActivity) => void;
submitting: boolean;
}
const ActivityForm: React.FC<IProps> = ({
setEditMode,
activity: initialFormState,
createActivity,
editActivity,
submitting,
}) => {
const initializeForm = () => {
if (initialFormState) {
return initialFormState;
} else {
return {
id: "",
title: "",
category: "",
description: "",
date: "",
city: "",
venue: "",
};
}
};
const [activity, setActivity] = useState<IActivity>(initializeForm);
const [activityChanged, setActivityChanged] = useState(false);
const handleSubmit = () => {
console.log(activity);
if (activity.id.length === 0) {
let newActivity = {
...activity,
id: uuid(),
};
createActivity(newActivity);
} else {
editActivity(activity);
}
};
const handleInputChange = (
event: FormEvent<HTMLInputElement | HTMLTextAreaElement>
) => {
const { name, value } = event.currentTarget;
setActivity({ ...activity, [name]: value });
setActivityChanged(true)
};
return (
<Segment clearing>
<Form onSubmit={handleSubmit}>
<Form.Input
onChange={handleInputChange}
name="title"
placeholder="Title"
value={activity.title}
/>
<Form.TextArea
onChange={handleInputChange}
name="description"
rows={2}
placeholder="Description"
value={activity.description}
/>
<Form.Input
onChange={handleInputChange}
name="category"
placeholder="Category"
value={activity.category}
/>
<Form.Input
onChange={handleInputChange}
name="date"
type="datetime-local"
placeholder="Date"
value={activity.date}
/>
<Form.Input
onChange={handleInputChange}
name="city"
placeholder="City"
value={activity.city}
/>
<Form.Input
onChange={handleInputChange}
name="venue"
placeholder="Venue"
value={activity.venue}
/>
<Button
disabled={!activityChanged}
loading={submitting}
floated="right"
positive
type="submit"
content="Submit"
/>
<Button
onClick={() => setEditMode(false)}
floated="right"
type="button"
content="Cancel"
/>
</Form>
</Segment>
);
};
export default ActivityForm;
