Rerender a React Application
In this lesson, we'll learn how we can call ReactDOM.render repeatedly with brand new React Elements and React will preserve element focus and only do the minimal required DOM operations for the re-render.
I am getting the below warning, and settimeout function is not being called, I have tried using defaultValue instead of value, but it does not work too. Do you know why is it not rerendering the time?
Warning: Failed prop type: You provided a value prop to a form field without an onChange handler. This will render a read-only field. If the field should be mutable use defaultValue. Otherwise, set either onChange or readOnly.
in input
in div
my babel code
<script type=text/babel> function tick(){ const time = new Date().toLocaleTimeString(); const element = <div>it is <input value={time}/></div> ReactDOM.render(element, document.getElementById('root')); } tick(); setTimeout(tick, 1000); </script>If you use defaultValue instead of value your initial value can not be updated.
Simply use readonly to suppress the warning or supply a handler.
<input readOnly value={time} />