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

What is a Stateless Functional Component in React

What is a Stateless Functional Component?

A stateless component is one that can recive data and render it, but it does not manage the provided data or track changes to it. 

This method creates a javascript function that returns JSX or null. Which is also known as a component or JSX component (or a react component?).

React also requires that you start the function name with a Capital Letter, which seems very picky. 

So you cant have a function called myFunction it has to be called MyFunction.

When testing this i could not get it to render properly, as i think you have to call the function within < and > according to this document

so rather than this to render the MyComponent function

ReactDOM.render(MyComponent, document.getElementById('root')) 

it becomes this

ReactDOM.render(<MyComponent />, document.getElementById('root'))

just testing this using the react browser tools, and it registers as a component!

HTML

<div id="root"></div>

Scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.0.0-alpha-5fa4d79b0-20211008/umd/react.production.min.js" integrity="sha512-5PVmWGoNJocWPdQJmJd1aRbz3cFcFgXctWKLWcitqtgX64jF+ttfg9g2oLltmeQ1HUo3gT6QchaMK3h+S+JG4Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.0.0-alpha-5fa4d79b0-20211008/umd/react-dom.production.min.js" integrity="sha512-pUsjUv+9XgkTn+UbLyNIT4YNZPF2p0E45FBKmDL7Ti8iovYwp2CUkQs6Q7J9y5scLxWaOM+T5jJc0ls+WHUcmQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel">
const MyComponent = function() {
  // Change code below this line
	return (
      <div className="my-component">
      	The text string in my class. 
      </div>
      );
  // Change code above this line
}
// ReactDOM.render(MyComponent, document.getElementById('root'))
ReactDOM.render(<MyComponent />, document.getElementById('root'))
</script>

Javascript

/*
const MyComponent = function() {
  // Change code below this line
	return (
      <div className="my-component">
      	The text string in my class. 
      </div>
      );
  // Change code above this line
}
*/

External Link for What is a Stateless Functional Component in React

View Statistics
This Week
90
This Month
313
This Year
313

No Items Found.

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

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
I believe that success can be measured in the number of uncomfortable conversations you're willing to have.
Unknown