how to edit and change/rename the title(React) - javascript

Hello:) I am writing simple application(similar to to-do-list). The task is to add such functionality as the ability to change the title of the announcement.
You add the title and description of the announcement and click on "submit" button -> https://prnt.sc/tf8zxl
the annoncement appears below and you need to have the ability to change the title of it(rename it)->https://prnt.sc/tf8xa2
I added the input when click on the title but it does not allow to write inside it and I do not have any ideas on how to save it in this.state.data correctly.
here is the source code -> https://codesandbox.io/s/eager-darkness-uh9xl?file=/src/App.js

Controlled input
If you need controlled input you have to change values somehow. You are not changing anything at this moment and you are calling handleChange which changes state.title, not state.data[someIndex].title - so the value cannot be changed.
I've provided modified solution where is updating finnished.
Uncontrolled input
If you are OK with uncontrolled input you are probably looking for input attribute defaultValue instead of value. It doesn't change because you are not changing value at all so it's being instantly re-rendered with original value from this.props.data.title.
I've set value by attribute defaultValue and changed onChange on onBlur so update will triger only when you lose focus.
Your modified codesandbox.

Use input in this way
const [title,setTitle] = useState('')
<input type="text" value={title} onChange={(e)=>setTitle(e.target.value)} />

Related

How to change the default value from a text field in react?

I am not able to edit in the text field its shows only the default value ,how to initially its show the default values and the I have to edit the text field as my requirement
const[vari,setVari]=React.useState("SAM");
return (
<div>
<input value={vari} onchange={(e)=>setVari(e.target.value)}/>
</div>
It is probably due to the fact that you are spelling the event listener in the HTML way instead of the React way. Try onChange instead of onchange.
You need 'onChange' not 'onchange': https://stackblitz.com/edit/react-ehulbm

update input field value in react JS state

this is my first question here,pardon me for any mistake. So ,I have a few inputs and for displaying the values of them I used some elements like h1 and div's which are in a seperate component. I want my elements to have some default value, so for that I kept them in state and then I call an onChange function on inputs which will update my elements state. I tried doing it with event.target like nameElement:event.target.value ,it would have worked if i had one input but because I have multiple inputs ,when I change an input field it gets overwritten by the one I change next. So how can I update only the input field I change. Like if I write something in name input field only the element of CV which is holding the name field should change . Here's my code sandbox link https://codesandbox.io/s/cool-glitter-9w2mh?file=/src/App.js
I am not sure, I got the issue right. But I got into the sandbox and below are my observations.
I would advise using Formik if you are dealing with the user-input form. Link - https://formik.org/docs/tutorial
Since you have created a single state that contains default value as well as user input value, any changes made by the user is not saved after clicking on "viewCV" link that re-renders entire component.
Changes Required
Have two states : initialData and userDetails.
Modify handleChange
handleChange = (input, e) => {
this.setState((prevState) => {
return {
...prevState,
[input]: e.target.value
};
});
};
In components such as workExp, education make sure you link handleChange as an arrow function for the "onChange" event.
<input onChange={(e) => handleChange("job", e)}>Email
Modify submit button to render the Resume template with user inputted values.
Modify viewCV link which is causing entire parent component re-rendering.

React Native - Difference between onChangeText and onSubmitEditing?

From the Facebook React Native Text Input documentation, I was able to discern that this is what happens when onSubmitEditing is used:
Callback that is called when the text input's submit button is pressed.
However, there wasn't anything for onChangeText. I'm assuming if the text has changed, then it will trigger.
Why would I want to use one other than the other? For example if I'm making something that takes in text for the TextInput field, wouldn't I just want to use onChangeText? In some examples I've seen them use onSubmitEditing and I'm confused on why you would use one over the other. This question is different than wondering how to make the submit button - I'm asking why I would use onChangeText vs. onSubmitEditing.
onSubmitEditing is triggered when you click the text input submit button (keyboard button).
onChangeText is triggered when you type any symbol in the text input.
For example, you might need some validation on every key press, in that case you will use onChangeText, if you need the validation to trigger when you finish typing, you need onSubmitEditing
In your example, you will achieve what you need in both cases.
onSubmitEditing is a callback when you tap the button in the screenshot below.
onChangeText is a callback when you type anything into a TextInput.
1: onSubmitEditing
onSubmitEditing : When you want to submit the editing of text field and want to call some action like dimissing the mobile keyboard or calling submit action or API to pass current screen data,one can use it.
In short,when you are done with adding the text to field and want to proceed with some action to next Screen,one can use it.
It called only when one press the keyboard button.
e.g. When we press GO,RETURN,Search button on keyboard.
2: onChangeText
onChangeText : Its typical use to update the state of Component with TextInput value like Reactjs onChange event.
Its called on every change of character.

Modify Redux Form Value and Trigger Onchange

I have a simple hidden input field in my React Redux-Form and the value of the field is set by some Google Tag Manager code that basically does document.getElementById('gtm_field').value = 'some value'
The onchange event never gets fired and therefore the value of the form field never gets set in my Redux store. What is the recommended way to approach this problem? Note that I can modify the GTM code that is added to the page do trigger HTML element events, but it has to be added 'outside' the context of my React app.
Is there a simple way to set the value of a redux-form input field from 'external' JS?
You should use the function change() in redux-form props, it could change the value of a field in the Redux store. The usage like this:
handleChange() {
this.props.change(field:String, value:any)
}

Where is the value of an input stored after changing it in browser?

I am using Reactjs with bootstrap, it has an input field of text which use bootstrap-datepicker to choose date.
After I choose a date, the value of the input field is not stored, so the state of reactjs component cannot be changed. I didn't see a change in the dom's value, text or anything, so where is this value changed and why reactjs cannot detect the change?
I am using an input and javascript to load the picker:
$('.date-input').datepicker();
Thanks.
I haven't personally used bootstrap for my development, but generally the content of the input box is stored in two ways when it comes to react.
defaultValue
value.
If you provide a defaultValue and dont assign a onChange function to it then the input box will be a readOnly textbox.
To change the content of the input box provide a onChange event where you set the content state of the input box. In this way you can change the value inside the input box.
So from the looks of it in your case, set the state of the input box component from your datepicker to change the value of the input box component.

Categories

Resources