CopyPastor

Detecting plagiarism made easy.

Score: 1; Reported for: Exact paragraph match Open both answers

Possible Plagiarism

Plagiarized on 2021-02-16
by Pradeep

Original Post

Original - Posted on 2014-07-02
by Douglas



            
Present in both answers; Present only in the new answer; Present only in the old answer;

For Class Based Components
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
import React from "react"; import { TextField } from "@material-ui/core"; import { withStyles, createStyles } from "@material-ui/core/styles";
const commonStyles = (theme) => createStyles({ root: {},
warningStyles: { "& .MuiFormLabel-root.Mui-error": { color: "orange !important" }, "& .MuiInput-underline.Mui-error:after": { borderBottomColor: "orange !important" }, "& .MuiFormHelperText-root.Mui-error": { color: "orange !important" } } });
class DemoComponent extends React.Component { render() { const { classes } = this.props; const _text1HasWarning = false; const _text2HasWarning = true; const _text3HasWarning = false;
return ( <> <TextField error={false} className={_text1HasWarning ? classes.warningStyles : null} value="Valid Value" variant="standard" label="Valid label" helperText="Valid helper text" /> <br /> <br /> <br /> <TextField error={true} className={_text2HasWarning ? classes.warningStyles : null} value="warning value" variant="standard" label="warning label" helperText="warning helper text" /> <br /> <br /> <br /> <TextField error={true} className={_text3HasWarning ? classes.warningStyles : null} value="error value" variant="standard" helperText="error helper text" label="error label" /> </> ); } } export default withStyles(commonStyles)(DemoComponent);

<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<!-- end snippet -->
[Output][1]

[1]: https://i.stack.imgur.com/GVC9k.png
React circa 2020 ----------------
In the `onClick` callback, call the [state hook's][1] setter function to update the state and re-render:
<!-- begin snippet: js hide: false console: true babel: true -->
<!-- language: lang-js -->
const Search = () => { const [showResults, setShowResults] = React.useState(false) const onClick = () => setShowResults(true) return ( <div> <input type="submit" value="Search" onClick={onClick} /> { showResults ? <Results /> : null } </div> ) }
const Results = () => ( <div id="results" className="search-results"> Some Results </div> )
ReactDOM.render(<Search />, document.querySelector("#container"))
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
<div id="container"> <!-- This element's contents will be replaced with your component. --> </div>
<!-- end snippet -->
[JSFiddle][2]
React circa 2014 ----------------
The key is to update the state of the component in the click handler using `setState`. When the state changes get applied, the `render` method gets called again with the new state:
<!-- begin snippet: js hide: false console: true babel: true -->
<!-- language: lang-js -->
var Search = React.createClass({ getInitialState: function() { return { showResults: false }; }, onClick: function() { this.setState({ showResults: true }); }, render: function() { return ( <div> <input type="submit" value="Search" onClick={this.onClick} /> { this.state.showResults ? <Results /> : null } </div> ); } });
var Results = React.createClass({ render: function() { return ( <div id="results" className="search-results"> Some Results </div> ); } });
ReactDOM.render( <Search /> , document.getElementById('container'));
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.2/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.6.2/react-dom.min.js"></script>
<div id="container"> <!-- This element's contents will be replaced with your component. --> </div>
<!-- end snippet -->
[JSFiddle][3]

[1]: https://reactjs.org/docs/hooks-state.html [2]: https://jsfiddle.net/khx30pnv/ [3]: http://jsfiddle.net/kb3gN/15084/

        
Present in both answers; Present only in the new answer; Present only in the old answer;