Mixing
React Form Input with initial text value
I am using React Bootstrap input components and would like an initial value for the input component, but I cannot see how to do this. Using defaultValue does not put a physical text into the input component, which is what I am trying to do. How do I do this? Thanks in advance.
Here is my component:
<InputGroup>
<FormControl
aria-label="Default"
aria-describedby="inputGroup-sizing-default"
value = {this.state.name}
onChange={(event)=>{
this.setState({
name:event.target.value
});
}}
readOnly={ isReadOnly }
defaultValue={this.state.name} // ---> This is what should make the text read the pre-existing name
/>
</InputGroup>
javascript reactjs
asked Jan 2 at 5:23
Ryan CocuzzoRyan Cocuzzo
1,09221439
|
show 3 more comments
I am using React Bootstrap input components and would like an initial value for the input component, but I cannot see how to do this. Using defaultValue does not put a physical text into the input component, which is what I am trying to do. How do I do this? Thanks in advance.
Here is my component:
<InputGroup>
<FormControl
aria-label="Default"
aria-describedby="inputGroup-sizing-default"
value = {this.state.name}
onChange={(event)=>{
this.setState({
name:event.target.value
});
}}
readOnly={ isReadOnly }
defaultValue={this.state.name} // ---> This is what should make the text read the pre-existing name
/>
</InputGroup>
javascript reactjs
asked Jan 2 at 5:23
Ryan CocuzzoRyan Cocuzzo
1,09221439
Looking at React Bootstrap examples, this seems fine.. post your whole component file code including state
– Ashley Brown
Jan 2 at 5:29
Seems fine can you create stackblitz demo to reproduce?
– Just code
Jan 2 at 5:30
Actually, you have notypeassigned to this component.. what is it, a text field?
– Ashley Brown
Jan 2 at 5:30
1
Are you able to set a value by hard coding it rather than relying on the state value as a test?
– Ashley Brown
Jan 2 at 5:32
1
Glad you got it sorted. Post your comment as an answer to this question so that you may accept your own answer within a few days to resolve this issue - happy coding
– Ashley Brown
Jan 2 at 5:40
|
show 3 more comments
I am using React Bootstrap input components and would like an initial value for the input component, but I cannot see how to do this. Using defaultValue does not put a physical text into the input component, which is what I am trying to do. How do I do this? Thanks in advance.
Here is my component:
<InputGroup>
<FormControl
aria-label="Default"
aria-describedby="inputGroup-sizing-default"
value = {this.state.name}
onChange={(event)=>{
this.setState({
name:event.target.value
});
}}
readOnly={ isReadOnly }
defaultValue={this.state.name} // ---> This is what should make the text read the pre-existing name
/>
</InputGroup>
javascript reactjs
asked Jan 2 at 5:23
Ryan CocuzzoRyan Cocuzzo
1,09221439
I am using React Bootstrap input components and would like an initial value for the input component, but I cannot see how to do this. Using defaultValue does not put a physical text into the input component, which is what I am trying to do. How do I do this? Thanks in advance.
Here is my component:
<InputGroup>
<FormControl
aria-label="Default"
aria-describedby="inputGroup-sizing-default"
value = {this.state.name}
onChange={(event)=>{
this.setState({
name:event.target.value
});
}}
readOnly={ isReadOnly }
defaultValue={this.state.name} // ---> This is what should make the text read the pre-existing name
/>
</InputGroup>
javascript reactjs
javascript reactjs
asked Jan 2 at 5:23
Ryan CocuzzoRyan Cocuzzo
1,09221439
asked Jan 2 at 5:23
Ryan CocuzzoRyan Cocuzzo
1,09221439
asked Jan 2 at 5:23
Ryan CocuzzoRyan Cocuzzo
1,09221439
asked Jan 2 at 5:23
Ryan CocuzzoRyan Cocuzzo
1,09221439
asked Jan 2 at 5:23
Ryan CocuzzoRyan Cocuzzo
1,09221439
1,09221439
Looking at React Bootstrap examples, this seems fine.. post your whole component file code including state
– Ashley Brown
Jan 2 at 5:29
Seems fine can you create stackblitz demo to reproduce?
– Just code
Jan 2 at 5:30
Actually, you have notypeassigned to this component.. what is it, a text field?
– Ashley Brown
Jan 2 at 5:30
1
Are you able to set a value by hard coding it rather than relying on the state value as a test?
– Ashley Brown
Jan 2 at 5:32
1
Glad you got it sorted. Post your comment as an answer to this question so that you may accept your own answer within a few days to resolve this issue - happy coding
– Ashley Brown
Jan 2 at 5:40
|
show 3 more comments
Looking at React Bootstrap examples, this seems fine.. post your whole component file code including state
– Ashley Brown
Jan 2 at 5:29
Seems fine can you create stackblitz demo to reproduce?
– Just code
Jan 2 at 5:30
Actually, you have notypeassigned to this component.. what is it, a text field?
– Ashley Brown
Jan 2 at 5:30
1
Are you able to set a value by hard coding it rather than relying on the state value as a test?
– Ashley Brown
Jan 2 at 5:32
1
Glad you got it sorted. Post your comment as an answer to this question so that you may accept your own answer within a few days to resolve this issue - happy coding
– Ashley Brown
Jan 2 at 5:40
Looking at React Bootstrap examples, this seems fine.. post your whole component file code including state
– Ashley Brown
Jan 2 at 5:29
Looking at React Bootstrap examples, this seems fine.. post your whole component file code including state
– Ashley Brown
Jan 2 at 5:29
Seems fine can you create stackblitz demo to reproduce?
– Just code
Jan 2 at 5:30
Seems fine can you create stackblitz demo to reproduce?
– Just code
Jan 2 at 5:30
Actually, you have no
type assigned to this component.. what is it, a text field?– Ashley Brown
Jan 2 at 5:30
Actually, you have no
type assigned to this component.. what is it, a text field?– Ashley Brown
Jan 2 at 5:30
1
1
Are you able to set a value by hard coding it rather than relying on the state value as a test?
– Ashley Brown
Jan 2 at 5:32
Are you able to set a value by hard coding it rather than relying on the state value as a test?
– Ashley Brown
Jan 2 at 5:32
1
1
Glad you got it sorted. Post your comment as an answer to this question so that you may accept your own answer within a few days to resolve this issue - happy coding
– Ashley Brown
Jan 2 at 5:40
Glad you got it sorted. Post your comment as an answer to this question so that you may accept your own answer within a few days to resolve this issue - happy coding
– Ashley Brown
Jan 2 at 5:40
|
show 3 more comments
1 Answer
1
active
oldest
votes
It gets its value from state.name so instead you should define default state on your component that holds the control.
For example in the constructor:
constructor(props: any) {
super(props)
this.state = {
name: 'default value',
}
}
If your form is to be pre-populated with existing server-side data, you might want to set it as the component loads (after a call to the backend). In which case you could hook into the componentDidMount method. Read more about component life cycle methods here: https://reactjs.org/docs/react-component.html#the-component-lifecycle
answered Jan 2 at 5:57
S..S..
3,9902532
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54001597%2freact-form-input-with-initial-text-value%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
It gets its value from state.name so instead you should define default state on your component that holds the control.
For example in the constructor:
constructor(props: any) {
super(props)
this.state = {
name: 'default value',
}
}
If your form is to be pre-populated with existing server-side data, you might want to set it as the component loads (after a call to the backend). In which case you could hook into the componentDidMount method. Read more about component life cycle methods here: https://reactjs.org/docs/react-component.html#the-component-lifecycle
answered Jan 2 at 5:57
S..S..
3,9902532
add a comment |
It gets its value from state.name so instead you should define default state on your component that holds the control.
For example in the constructor:
constructor(props: any) {
super(props)
this.state = {
name: 'default value',
}
}
If your form is to be pre-populated with existing server-side data, you might want to set it as the component loads (after a call to the backend). In which case you could hook into the componentDidMount method. Read more about component life cycle methods here: https://reactjs.org/docs/react-component.html#the-component-lifecycle
answered Jan 2 at 5:57
S..S..
3,9902532
add a comment |
It gets its value from state.name so instead you should define default state on your component that holds the control.
For example in the constructor:
constructor(props: any) {
super(props)
this.state = {
name: 'default value',
}
}
If your form is to be pre-populated with existing server-side data, you might want to set it as the component loads (after a call to the backend). In which case you could hook into the componentDidMount method. Read more about component life cycle methods here: https://reactjs.org/docs/react-component.html#the-component-lifecycle
answered Jan 2 at 5:57
S..S..
3,9902532
It gets its value from state.name so instead you should define default state on your component that holds the control.
For example in the constructor:
constructor(props: any) {
super(props)
this.state = {
name: 'default value',
}
}
If your form is to be pre-populated with existing server-side data, you might want to set it as the component loads (after a call to the backend). In which case you could hook into the componentDidMount method. Read more about component life cycle methods here: https://reactjs.org/docs/react-component.html#the-component-lifecycle
answered Jan 2 at 5:57
S..S..
3,9902532
answered Jan 2 at 5:57
S..S..
3,9902532
answered Jan 2 at 5:57
S..S..
3,9902532
answered Jan 2 at 5:57
S..S..
3,9902532
3,9902532
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54001597%2freact-form-input-with-initial-text-value%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Looking at React Bootstrap examples, this seems fine.. post your whole component file code including state
– Ashley Brown
Jan 2 at 5:29
Seems fine can you create stackblitz demo to reproduce?
– Just code
Jan 2 at 5:30
Actually, you have no
typeassigned to this component.. what is it, a text field?– Ashley Brown
Jan 2 at 5:30
1
Are you able to set a value by hard coding it rather than relying on the state value as a test?
– Ashley Brown
Jan 2 at 5:32
1
Glad you got it sorted. Post your comment as an answer to this question so that you may accept your own answer within a few days to resolve this issue - happy coding
– Ashley Brown
Jan 2 at 5:40