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
