In most case react form will works normally until you wanted to set a value in the input and change while changes / start to input in something,
<input type="text" value="some value here" />
and you realised the value does not change no matter how hard you pressed, this is because of the controlled component:
“In HTML, form elements such as <input>, <textarea>, and <select> typically maintain their own state and update it based on user input. In React, mutable state is typically kept in the state property of components, and only updated with setState().”
Previous article I mentioned about this.props.children and its feature, problem is this.props.children does not not provide a way to pass down the props, so we need a wrapper called React.cloneElement which allows you get this component and return a new component where you can also pass in the props like this:
When I first saw this API, its about to tear my head apart, and now I will share with you about what I have learned on this.props.children the concept is easy: Imaging you have Parent component that call child component that works fine,
SVG Scalable Vector Graphics is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation. Because of its scalable native, especially with very high graphical screens(example: retinal screen for Mac) these days, we need solutions for images or graphics to be display on these screens.
Well these are many ways to resolve these, such as using large image 2x of your current size and scale down to smaller dimension on web, or for icons we use Font-icons. Since SVG was widely used on most modern browsers including IE9, and its pretty lightweight we should make use of it. How we can use SVG on the web and why we will use it.