CopyPastor

Detecting plagiarism made easy.

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

Possible Plagiarism

Plagiarized on 2023-03-24
by Dev.Prabhat

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;

You can Try this Approach Also,
<!-- begin snippet: js hide: false console: true babel: true -->
<!-- language: lang-js --> {[1, 2, 3, 4, 5].map((el) => { return ( <React.Fragment> el <= ratings ? ( <StarIcon fill="#000000" /> ) : ( <StarIcon fill="#ffffff" /> )} </React.Fragment> ); })}
<!-- 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 -->

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;