Rerender a React Application

InstructorKent C. Dodds

Share this video with your friends

Send Tweet

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.

~ 3 years ago

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>
Sascha Henger
~ 3 years ago

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