CopyPastor

Detecting plagiarism made easy.

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

Possible Plagiarism

Plagiarized on 2021-01-01
by user2221209

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;

If I understand you correctly, you will want to create a custom component per award type, with images, boiler-plate text and input fields. You can pass in to these components the props you will need e.g. **Name**, **Date** etc. You can then render this component only when necessary, passing in the individual student's details, to presented in the input fields. You can use CSS to style the component however you'd like, e.g. removing top/left/right borders around fields etc.
There are no bespoke components like this I'm aware of, but it wouldn't be too difficult to create one yourself.
<!-- begin snippet: js hide: false console: true babel: true -->
<!-- language: lang-js -->
const Award = ({type, name}) => ( <div class="award"> <div class="header">Award of Excellence</div>
<div class="type"> <label htmlFor="type">for</label> <input type="text" id="type" name="type" value={type} /> </div>
<div class="recipient"> <label htmlFor="recipient">Awarded to</label> <input type="text" id="recipient" name="recipient" value={name} /> </div>
<div class="footer"> <div> <input type="text" id="date" name="date" value={new Date()} /> <label htmlFor="date">Date</label> </div>
<img class="medal" src="https://www.diggerland.com/wp-content/uploads/2015/01/Gold-medal1.png" alt="medal" />
<div> <input type="text" id="signature" name="signature" value="Professor Plum" /> <label htmlFor="signature">Signature</label> </div> </div> </div> );
ReactDOM.render(<Award type="1st Award" name="John Smith" />, document.body);
<!-- language: lang-css -->
.award { display: flex; flex-direction: column; align-items: center; }
.type, .recipient, .footer > * { display: flex; flex-direction: column; align-items: center; padding: 1rem; font-family: "luminary"; }
.footer { display: flex; padding: 2rem; }
.medal { height: 4rem; }
input { border-width: 0 0 0.1rem; }
<!-- 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;