CODEWITHSUNDEEP
javascripthtmlreactjsstyled-components
ReginaTheMean
ReginaTheMean

Reputation: 67

Attribute value="some value" makes input uneditable React

For some reason, my input is uneditable! I need it to be on "edit post" page, so there should be value = "some prev value" so it's more convenient for the user to edit his/her own post from the previous value. Placeholder attribute doesn't fit my requirements, because it just shows the user the previous data, and doesn't let him add corrections to it, thus the user is only able to write down all the content him wants to make edits to again and again!

const ArticleTitle = window.styled.input`
  &:focus {
    outline: none;
  }
  border: none;
  width: ${adaptSize(599)};
  color: #8e8e8e;
  height: ${adaptSize(26)};
  font-size: ${adaptSize(20)}!important;
  background-color: #eeeeee;
  border-radius: ${adaptSize(9)};
  margin-bottom: ${adaptSize(14)}!important;
`;

const ArticleContent = window.styled.input`
  font-size: ${adaptSize(18)};
  padding-top: ${adaptSize(14)}!important;
  border-top: ${adaptSize(1)} solid #5e5e5e !important;
  width: ${adaptSize(1000)};
  color: #8e8e8e;
  display: flex;
  border: none;
  &:focus {
    outline: none;
  }
`;
function EditPost({article}){
         return ( <>
         <Article>
            <ArticleTitle type="text" value={article.title} id="title" />
            <ArticleContent type="text" value={article.content} id="content" />
         </Article>
         </> )
}

const article = {
  title: "some title",
  content: "some content"
};

//Example of article I want to be edited

I've edited my original code so it's more readable. The result is just input with uneditable fields! I want it to be so that the default value is still there, but so that the user can make some corrections! I don't know why is the default behavior for these two inputs is overridden by some strange behavior. I thought that the reason was display flex, but display flex is only applied to the second input, yet both are uneditable currently!

Upvotes: 0

Views: 148

Answers (2)

Ahmed Elrefaey
Ahmed Elrefaey

Reputation: 148

You must handle the onChange state of the input, if you want to pass a value prop to it, If you don't want to do that you can just replace value with defaultValue like that:

<ArticleTitle type="text" defaultValue={article.title} id="title" />

Upvotes: 1

Tushar Shahi
Tushar Shahi

Reputation: 20626

There are two ways to have input fields in React - controlled(and recommended in most cases) and uncontrolled. When you pass in values like this you are trying to use controlled inputs. Now you will have to take responsibility of handling the change event for your input since it is controlled by you. But since there is no onchange function, it will not work.

In short, add an onChange event handler.

Upvotes: 1

Related Questions