I'm trying to change the values inside inputs. I got those values from the db. But it doesn't allow me to type or edit the value. I've added an handleInputChange function to put inside onChange inside each input tag but it didn't work. I need those values to be inside inputs at the beginning and disappear after the user starts typing.

I thought about ref={ref} and defaultValue, but I don't know how I'll get updated values than in order to send it back to the db.

EditFeedbackPage.js

    const EditFeedbackPage = () => {
    
        const initialState = {
            category: "All",
            comments: [],
            detail: "",
            id: nanoid(),
            createdAt: Timestamp.now().toDate(),
            status: "Suggestion",
            title: "",
            upVotesCount: []
        }
    
        const [state, setState] = useState(initialState);
        const { feedback } = useSelector((state) => state.data);
    
        const { category, detail, title, status } = feedback;
        console.log(feedback)
    
        const params = useParams();
        const { id } = params;
        console.log("id from params => ", id)
        const dispatch = useDispatch();
    
        const navigate = useNavigate();
    
        const cancelAddFeedback = () => {
            navigate("/")
        }
    
        useEffect(() => {
            dispatch(getSingleFeedback(id));
            console.log("feedbackId => ", id);
    
        }, []);
    
        const editFeedback = async (e, id) => {
            e.preventDefault();
            console.log("feedbackId => ", id);
            dispatch(editFeedbackInit(id, feedback))
        }
    
        const handleInputChange = (e) => {
            let { name, value } = e.target;
            setState({ ...state, [name]: value })
        }
    
        const handleSubmit = (e) => {
            e.preventDefault();
            setState({ ...state, title: '', detail: "", category: "All" })
        }

        return (

                    <EditFeedbackFormContainer
                        onSubmit={handleSubmit}
                    >
                        <h4>Feedback Title</h4>
                        <label htmlFor="title">Add a short, descriptive headline</label>
                        <input
                            type="text"
                            name='title'
                            value={title}
                            onChange={handleInputChange}

                        />

                        <h4>Category</h4>
                        <label htmlFor="category">Change a category for your feedback</label>
                        <select
                            name="category"
                            id="category"
                            value={category}
                            onChange={handleInputChange}
                        >
                            <option value="All">All</option>
                            <option value="UI">UI</option>
                            <option value="UX">UX</option>
                            <option value="Enhancement">Enhancement</option>
                            <option value="Bug">Bug</option>
                            <option value="Feature">Feature</option>
                        </select>

                        <h4>Update Status</h4>
                        <label htmlFor="status">Change feedback status</label>
                        <select
                            name="status"
                            id="status"
                            value={status}
                            onChange={handleInputChange}
                        >
                            <option value="Suggestion">Suggestion</option>
                            <option value="Planned">Planned</option>
                            <option value="In-Progress">In-Progress</option>
                            <option value="Live">Live</option>
                        </select>

                        <h4>Change a feedback detail</h4>
                        <label htmlFor="detail">Include any specific comments on what should be improved, added, etc.</label>
                        <textarea
                            name="detail"
                            id="detail"
                            value={detail}
                            onChange={handleInputChange}

                        />
                        <EditFeedbackButtonsContainer>
                            <EditFeedbackButtonDelete
                                onClick={deleteFeedback}
                            >
                                Delete
                            </EditFeedbackButtonDelete>

                            <EditFeedbackButtonCancel onClick={cancelAddFeedback}>Cancel</EditFeedbackButtonCancel>
                            <EditFeedbackButtonAdd
                                onClick={editFeedback}
                            >Edit Feedback</EditFeedbackButtonAdd>
                        </EditFeedbackButtonsContainer>
                    </EditFeedbackFormContainer>
)

CodePudding user response：

use the state value in the title

  <input
          type="text"
          name='title'
          value={state.title}
          onChange={handleInputChange}
  />

And assign useSelector value to initial state

    const { feedback } = useSelector((state) => state.data);

    const { category, detail, title, status } = feedback;
    console.log(feedback)
   
    const initialState = {
        category: "All",
        comments: [],
        detail: "",
        id: nanoid(),
        createdAt: Timestamp.now().toDate(),
        status: "Suggestion",
        title,
        upVotesCount: []
    }

    const [state, setState] = useState(initialState);

CodePudding user response：

Depending on your data structure, you can give your inputs a name & let the other state data same and update only one input.

import { Container, TextField, Stack, MenuItem, Button } from "@mui/material";
import { useState } from "react";
import { v4 as uuidV4 } from "uuid";

const EditFeedbackPage = () => {
  const initialState = {
    category: "All",
    comments: [],
    detail: "Test",
    id: uuidV4(),
    createdAt: new Date(),
    status: "Suggestion",
    title: "",
    upVotesCount: []
  };

  const [state, setState] = useState(initialState);

  const handleInputChange = (event) => {
    const { name, value } = event.target;
    setState({ ...state, [name]: value });
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    alert(JSON.stringify(state, null, 2));
  };

  return (
    <Container
      sx={{
        mt: 2
      }}
    >
      <Stack spacing={2}>
        <TextField
          size="small"
          name="title"
          value={state.title}
          onChange={handleInputChange}
          label="Add a short, descriptive headline"
        />
        <TextField
          select
          size="small"
          name="category"
          value={state.category}
          onChange={handleInputChange}
          label="Change a category for your feedback"
        >
          <MenuItem value="All">All</MenuItem>
          <MenuItem value="UI">UI</MenuItem>
          <MenuItem value="UX">UX</MenuItem>
          <MenuItem value="Enhancement">Enhancement</MenuItem>
          <MenuItem value="Bug">Bug</MenuItem>
          <MenuItem value="Feature">Feature</MenuItem>
        </TextField>
        <TextField
          select
          size="small"
          name="status"
          id="status"
          value={state.status}
          onChange={handleInputChange}
          label="Change feedback status"
        >
          <MenuItem value="Suggestion">Suggestion</MenuItem>
          <MenuItem value="Planned">Planned</MenuItem>
          <MenuItem value="In-Progress">In-Progress</MenuItem>
          <MenuItem value="Live">Live</MenuItem>
        </TextField>
        <TextField
          multiline
          rows={4}
          size="small"
          name="detail"
          value={state.detail}
          onChange={handleInputChange}
          label="Include any specific comments on what should be improved, added, etc."
        />
      </Stack>
      <Button
        sx={{
          mt: 2
        }}
        onClick={handleSubmit}
      >
        Submit
      </Button>
    </Container>
  );
};

export default EditFeedbackPage;