Develop Reference

Pass a field in required when a radio button value is clicked

Basically I am using react hook form, I want to trigger a field to be required if I click a specific value in my radio button. Obviously it is dynamic so there could be anything in the radio button. I want to get the selected value from the radio and then depending on the selected value trigger another field to be required.
I have no clue on how to do it with react hook form; mayne someone has come across the same issue and have an example to show me

you can use validate function from react hook form
<input
{...register("test", {
validate:{ required: value => getValues().radioBtn }
})}
/>

You can follow these steps:
trigger a function once your desired radio button was clicked.
get hew value How to get value from radio button
set the attribute 'required' to true 'Required' attribute
let me know if that helps you

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

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)} />

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.

Deleting hidden value in the form on click event

I need to delete the hidden value that is created in the form
<div id="gotvalue">
</div>
Here my HTML Form will be empty and the div will get filled with the input value like this
<div id="gotvalue">
<input type="hidden" id="imagetextbox" name="imagetextbox"/>
</div>
But once the form is submitted i want to delete element inside the <div id="gotvalue">
$("#gotvalue").remove();
also tried
$('#gotvalue').html('');
But the value is not being removed.
How can i remove that it ??
Note : I can't use $("#imagetextbox").val(''); as it will empty only the value of the field .

Your selector is wrong, it should be $('#gotvalue'). Also, you say you want to empty the div, yet you are removing it from the DOM completely.
To achieve what you require you can either empty() the div, like this:
$('#gotvalue').empty();
Or you can remove the hidden input directly:
$('#imagetextbox').remove();
Example fiddle
If you want to leave the hidden field in place, but reset its value, you can use val(''):
$('#imagetextbox').val('');

you can try this
$('#gotvalue').html('');

How about using $('#gotvalue').html('');
Working Fiddle

Javascript: Fire onChange by setting a value programatically

I know that an onChange event will fire if the value of a field is changed, so is it possible to fire the onChange via Chrome console by setting the property of a field programatically?
The field in question is an input field, with an onChange attached to update a div with its new value.
The problem is the onChange callback method is firing when it shouldn't be, and i need to test whether one of the set up methods is causing the callback to fire when it assigns the fields default value

Try something like this please:
<input id="numberBox" data-dojo-type="dijit.form.NumberTextBox" />
<script>
dojo.connect( dijit.byId('numberBox'), "onChange", function ( event ) {
dijit.byId('numberBox').set('value', 12345 );
});
dijit.byId('numberBox').onChange();
</script>