Posted in react
12:24 am, October 16, 2021

How to Pass Props to a Stateless Functional Component in React

Props are like properties that you can pass into a component in react.

A prop would be something like this in your component. 


  <MyProp id="1234" />

Then you can access it with:


const MyProp = (props) => <h1>Hello, {}!</h1>

The following example passes in the current date to <CurrentDate date={Date()} /> and then accesses it with <p>The current date is: {}</p>.


<div id="challenge-node"></div>


<script src="" integrity="sha512-5PVmWGoNJocWPdQJmJd1aRbz3cFcFgXctWKLWcitqtgX64jF+ttfg9g2oLltmeQ1HUo3gT6QchaMK3h+S+JG4Q==" crossorigin="anonymous"
<script src="" integrity="sha512-pUsjUv+9XgkTn+UbLyNIT4YNZPF2p0E45FBKmDL7Ti8iovYwp2CUkQs6Q7J9y5scLxWaOM+T5jJc0ls+WHUcmQ=="
  crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src=""></script>
<script type="text/babel">
  const CurrentDate = (props) => {
    return (
        { /* Change code below this line */ }
        <p>The current date is: {}</p>
        { /* Change code above this line */ }

  class Calendar extends React.Component {
    constructor(props) {
    render() {
      return (
          <h3>What date is it?</h3>
          { /* Change code below this line */ }
          <CurrentDate date={Date()} />
          { /* Change code above this line */ }
  ReactDOM.render(<Calendar />, document.getElementById('challenge-node'));

External Link for How to Pass Props to a Stateless Functional Component in React

View Statistics
This Week
This Month
This Year

No Items Found.

Add Comment
Type in a Nick Name here
Search Code
Search Code by entering your search text above.

This is my test area for webdev. I keep a collection of code snippits here, mostly for my reference. Also if i find a good site, i usually add it here.

Join me on Substack if you want me to send you a collection of the things i have done or found or read for the week. Or follow me on twitter if you prefer, i dont post much but i probably should!


Random Quote
1. Show your work to the world instead of keeping in your head💆. 2. Do the work consistently👌 3. Respect your work🥰 4. Don't postpone your work 5. Make mistakes 🔥🔥🔥