Reactjs – What are React controlled components and uncontrolled components

react-componentreactjs

What are controlled components and uncontrolled components in ReactJS? How do they differ from each other?

Best Answer

This relates to stateful DOM components (form elements) and the React docs explain the difference:

A Controlled Component is one that takes its current value through props and notifies changes through callbacks like onChange. A parent component "controls" it by handling the callback and managing its own state and passing the new values as props to the controlled component. You could also call this a "dumb component".
A Uncontrolled Component is one that stores its own state internally, and you query the DOM using a ref to find its current value when you need it. This is a bit more like traditional HTML.

Most native React form components support both controlled and uncontrolled usage:

// Controlled:
<input type="text" value={value} onChange={handleChange} />

// Uncontrolled:
<input type="text" defaultValue="foo" ref={inputRef} />
// Use `inputRef.current.value` to read the current value of <input>

In most (or all) cases you should use controlled components.

Related Solutions

Javascript – Loop inside React JSX

Think of it like you're just calling JavaScript functions. You can't use a for loop where the arguments to a function call would go:

return tbody(
    for (var i = 0; i < numrows; i++) {
        ObjectRow()
    } 
)

See how the function tbody is being passed a for loop as an argument – leading to a syntax error.

But you can make an array, and then pass that in as an argument:

var rows = [];
for (var i = 0; i < numrows; i++) {
    rows.push(ObjectRow());
}
return tbody(rows);

You can basically use the same structure when working with JSX:

var rows = [];
for (var i = 0; i < numrows; i++) {
    // note: we are adding a key prop here to allow react to uniquely identify each
    // element in this array. see: https://reactjs.org/docs/lists-and-keys.html
    rows.push(<ObjectRow key={i} />);
}
return <tbody>{rows}</tbody>;

Incidentally, my JavaScript example is almost exactly what that example of JSX transforms into. Play around with Babel REPL to get a feel for how JSX works.

How can I get to know which server side programming is used by the website?

It is may possible via some methods:

Just look at the file extension (.php is obviously generated by php)
Examine the HTML for a software which was used create that and google for it
Search on-site for the software used
Examine the HTTP-Header
Just try to google it (this should at least work for major sites)

If none of these will help, there is no chance of finding it out except emailing the company.

Best Answer

Related Solutions

Javascript – Loop inside React JSX

How can I get to know which server side programming is used by the website?

Related Topic