Ufdjrw

Rotate a column

How can I get through very long and very dry, but also very useful technical documents when learning a new tool?

Why does GHC infer a monomorphic type here, even with MonomorphismRestriction disabled?

Explicit solution of a Hamiltonian system

How can I open an app using Terminal?

What is the point of a new vote on May's deal when the indicative votes suggest she will not win?

How do I construct this japanese bowl?

Return of the Riley Riddles in Reverse

Why do remote companies require working in the US?

Implement the Thanos sorting algorithm

Return the Closest Prime Number

Does the Brexit deal have to be agreed by both Houses?

What does "Its cash flow is deeply negative" mean?

Does it take more energy to get to Venus or to Mars?

Unreliable Magic - Is it worth it?

Is a stroke of luck acceptable after a series of unfavorable events?

Should I tutor a student who I know has cheated on their homework?

Why is there a PLL in CPU?

What size rim is OK?

Is it a good idea to use COLUMN AS (left([Another_Column],(4)) instead of LEFT in the select?

Anatomically Correct Strange Women In Ponds Distributing Swords

I believe this to be a fraud - hired, then asked to cash check and send cash as Bitcoin

Customer Requests (Sometimes) Drive Me Bonkers!

How to safely derail a train during transit?

Material ui Textfield Hinttext overlap with with text when text is set with setState in react

0

I am trying to autofill textfield using setState when user click on edit button. Text is set but default hintText and floatingLabelText overlap with text. When i click inside textfield lable go up but hintText overlap with text. How can i solve this?

this is textfield overlap image.

this is button

<button type="button" className="btn btn-primary btn-sm" id="edit"
onClick=this.editProduct.bind(this, product) value="edit">Edit</button>

when user click on edit button editProduct function setState is set like this

editProduct = product => 
 this.setState( 
 name: product.name,
 brand: product.brand,
 description: product.description, 
 ); 


render() 
const name, brand, description = this.state;
const values = name, brand, description ;

return ( 
 <div class="container"> 
 <Addproduct
 handleChange=this.handleChange
 values=values
 />
 )

this is textfield inside Addproduct component

<TextField
hintText="Enter Your Product Name"
floatingLabelText="Product Name"
onChange=handleChange('name')
errorText=values.nameError
defaultValue=values.name
fullWidth
/>

javascript reactjs material-ui

share|improve this question

asked Mar 7 at 13:57

vidyvidy

502314

• 
  
  
  

  
  2
  

  
  
  
  
  
  

  
  
  you can use value instead of using default value.
  
  – Ashishya11
  Mar 7 at 14:01
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @Ashishya11 after changing defaultValue to value my problem solved thanks.
  
  – vidy
  Mar 7 at 14:10
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Which version of material-ui are you using?
  
  – darksmurf
  Mar 7 at 18:37
  

  
  
  
  

add a comment | 

0

I am trying to autofill textfield using setState when user click on edit button. Text is set but default hintText and floatingLabelText overlap with text. When i click inside textfield lable go up but hintText overlap with text. How can i solve this?

this is textfield overlap image.

this is button

<button type="button" className="btn btn-primary btn-sm" id="edit"
onClick=this.editProduct.bind(this, product) value="edit">Edit</button>

when user click on edit button editProduct function setState is set like this

editProduct = product => 
 this.setState( 
 name: product.name,
 brand: product.brand,
 description: product.description, 
 ); 


render() 
const name, brand, description = this.state;
const values = name, brand, description ;

return ( 
 <div class="container"> 
 <Addproduct
 handleChange=this.handleChange
 values=values
 />
 )

this is textfield inside Addproduct component

<TextField
hintText="Enter Your Product Name"
floatingLabelText="Product Name"
onChange=handleChange('name')
errorText=values.nameError
defaultValue=values.name
fullWidth
/>

javascript reactjs material-ui

share|improve this question

asked Mar 7 at 13:57

vidyvidy

502314

• 
  
  
  

  
  2
  

  
  
  
  
  
  

  
  
  you can use value instead of using default value.
  
  – Ashishya11
  Mar 7 at 14:01
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @Ashishya11 after changing defaultValue to value my problem solved thanks.
  
  – vidy
  Mar 7 at 14:10
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Which version of material-ui are you using?
  
  – darksmurf
  Mar 7 at 18:37
  

  
  
  
  

add a comment | 

I am trying to autofill textfield using setState when user click on edit button. Text is set but default hintText and floatingLabelText overlap with text. When i click inside textfield lable go up but hintText overlap with text. How can i solve this?

this is textfield overlap image.

this is button

<button type="button" className="btn btn-primary btn-sm" id="edit"
onClick=this.editProduct.bind(this, product) value="edit">Edit</button>

when user click on edit button editProduct function setState is set like this

editProduct = product => 
 this.setState( 
 name: product.name,
 brand: product.brand,
 description: product.description, 
 ); 


render() 
const name, brand, description = this.state;
const values = name, brand, description ;

return ( 
 <div class="container"> 
 <Addproduct
 handleChange=this.handleChange
 values=values
 />
 )

this is textfield inside Addproduct component

<TextField
hintText="Enter Your Product Name"
floatingLabelText="Product Name"
onChange=handleChange('name')
errorText=values.nameError
defaultValue=values.name
fullWidth
/>

javascript reactjs material-ui

share|improve this question

asked Mar 7 at 13:57

vidyvidy

502314

<button type="button" className="btn btn-primary btn-sm" id="edit"
onClick=this.editProduct.bind(this, product) value="edit">Edit</button>

editProduct = product => 
 this.setState( 
 name: product.name,
 brand: product.brand,
 description: product.description, 
 ); 


render() 
const name, brand, description = this.state;
const values = name, brand, description ;

return ( 
 <div class="container"> 
 <Addproduct
 handleChange=this.handleChange
 values=values
 />
 )

<TextField
hintText="Enter Your Product Name"
floatingLabelText="Product Name"
onChange=handleChange('name')
errorText=values.nameError
defaultValue=values.name
fullWidth
/>

share|improve this question

asked Mar 7 at 13:57

vidyvidy

502314

share|improve this question

asked Mar 7 at 13:57

vidyvidy

502314

asked Mar 7 at 13:57

vidyvidy

502314

asked Mar 7 at 13:57

vidyvidy

502314

1 Answer
1

active

oldest

votes

0

You need to change the Textfield attributes to

<TextField
 placeholder="Enter Your Product Name"
 label="Product Name"
 onChange=handleChange('name')
 errorText=values.nameError
 value=values.name
 fullWidth
/>

share|improve this answer

answered Mar 7 at 17:14

will92will92

15317

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
);



);

draft saved

draft discarded

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

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55045514%2fmaterial-ui-textfield-hinttext-overlap-with-with-text-when-text-is-set-with-sets%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

0

You need to change the Textfield attributes to

<TextField
 placeholder="Enter Your Product Name"
 label="Product Name"
 onChange=handleChange('name')
 errorText=values.nameError
 value=values.name
 fullWidth
/>

share|improve this answer

answered Mar 7 at 17:14

will92will92

15317

add a comment | 

0

You need to change the Textfield attributes to

<TextField
 placeholder="Enter Your Product Name"
 label="Product Name"
 onChange=handleChange('name')
 errorText=values.nameError
 value=values.name
 fullWidth
/>

share|improve this answer

answered Mar 7 at 17:14

will92will92

15317

add a comment | 

You need to change the Textfield attributes to

<TextField
 placeholder="Enter Your Product Name"
 label="Product Name"
 onChange=handleChange('name')
 errorText=values.nameError
 value=values.name
 fullWidth
/>

share|improve this answer

answered Mar 7 at 17:14

will92will92

15317

<TextField
 placeholder="Enter Your Product Name"
 label="Product Name"
 onChange=handleChange('name')
 errorText=values.nameError
 value=values.name
 fullWidth
/>

share|improve this answer

answered Mar 7 at 17:14

will92will92

15317

answered Mar 7 at 17:14

will92will92

15317

answered Mar 7 at 17:14

will92will92

15317