CODEWITHSUNDEEP
javascriptreactjsinput
Sergo
Sergo

Reputation: 43

How to have changeable values in input React JS?

I was trying to set my value in the input value! but after that, I cannot write anything in the input field! I wanted to set values from the back end in value!

We are writing an admin channel to edit the article for that we need already existing article values to edit the article! What am I doing wrong! or Maybe you can suggest a better way to edit the article in the admin channel!

here is the code:

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { useParams } from 'react-router';

const EditArticle = (props) => {
  const [editValues, setEditValues] = useState([]);
  const [changedValues, setChangedValues] = useState('');
  console.log('values', editValues);
  console.log('changed', changedValues);
  const params = useParams();
  console.log(params);
  const resultsId = params.id;
  console.log('string', resultsId);
  const [authTokens, setAuthTokens] = useState(
    localStorage.getItem('token') || ''
  );

  const setTokens = (data) => {
    localStorage.setItem('token', JSON.stringify(data));
    setAuthTokens(data);
    // setToken(data['dataValues']['token']);
  };

  useEffect(() => {
    const fetchData = async () => {
      try {
        const res = await axios.get(
          `${process.env.REACT_APP_API_URL}/article/${resultsId}`
        );
        setEditValues(res.data);
      } catch (err) {}
    };
    fetchData();
  }, [resultsId]);

  const inputValue = editValues;

  const userToken = props.token;
  return (
    <div>
      <form value={{ authTokens, setAuthTokens: setTokens }}>
        <input
          value={editValues.title || ''}
          onChange={(input) => setChangedValues(input.target.value)}
          type='text'
        />
        <input
          //   ref={editValues.shortDesc}
          value={editValues.shortDesc}
          onChange={(input) => setChangedValues(input.target.value)}
          type='text'
        />
        <button type='submit'>send</button>
      </form>
    </div>
  );
};

export default EditArticle;

Upvotes: 1

Views: 1169

Answers (2)

faramarz razmi
faramarz razmi

Reputation: 279

you can use just do it just using editValues. try this: I just reproduced it without the api call to run the code.

import React, { useState, useEffect } from "react";

const EditArticle = (props) => {
  const [editValues, setEditValues] = useState([]);
  console.log("values", editValues);
 
  const [authTokens, setAuthTokens] = useState(
    localStorage.getItem("token") || ""
  );

  const setTokens = (data) => {
    localStorage.setItem("token", JSON.stringify(data));
    setAuthTokens(data);
    // setToken(data['dataValues']['token']);
  };

  useEffect(() => {
    const fetchData = async () => {
      try {
        //here get the data from api and setstate
        setEditValues({ title: "title", shortDesc: "shortDesc" });
      } catch (err) {}
    };
    fetchData();
  }, []);
  return (
    <div>
      <form value={{ authTokens, setAuthTokens: setTokens }}>
        <input
          value={editValues.title || ""}
          onChange={(input) => setEditValues({title: input.target.value})}
          type="text"
        />
        <input
          value={editValues.shortDesc}
          onChange={(input) => setEditValues({shortDesc: input.target.value})}

          type="text"
        />
        <button type="submit">send</button>
      </form>
    </div>
  );
};
export default EditArticle;

Upvotes: 1

andy mccullough
andy mccullough

Reputation: 9551

your onChange handler is updating a different state property than what is being used as the value on the input (editValues vs changedValues).

Also you can pass a defaultValue to input that will get used as the default value only.

See more here https://reactjs.org/docs/uncontrolled-components.html

Upvotes: 1

Related Questions