Is it possible to render inside a functional component in reactjs?

Question

I want to know the proper method to use render(){} while I'm using the functional component.

i'm new on reactjs, so far i'm always using functional component on everything :

const Something = () => {
}
export default Something

What i want is to render object which is react-scroll-parallax, while i'm using functional component, but i don't know the proper method to do that :

const Something = () => {
    render() {
      return (
         <ParallaxProvider>
           <Parallax className="custom-class" y={[-20, 20]} tagOuter="figure">
             <ImageBg src="../../images/wpbatik.jpg" />
           </Parallax>
         </ParallaxProvider>
      );
    }
}
export default Something

Thank you

In functional components there is no render, just return whatever you want rendered from the function. — Alejandro
– Alejandro, Commented Jan 3, 2022 at 15:09
I'd highly recommend reading up more on how functional components work, e.g. twilio.com/blog/react-choose-functional-components. There are going to be many further differences which will require your attention, such as the component lifecycle. — bsplosion
– bsplosion, Commented Jan 3, 2022 at 15:12
This is literally the first code sample in the React.js docs under 'Components' - reactjs.org/docs/… — serraosays
– serraosays, Commented Jan 3, 2022 at 15:12

akds · Accepted Answer · 2022-01-03 15:09:52Z

1

In a functional component, you use return and it will work the same way as return inside of the render() {} function in a class-based component.

Example:

function App() {
  return(
    <div>Some stuff inside</div>
  )
}

Here's a class based version of it:

class App extends React.Component {
  render() {
    return <div>Some stuff inside</div>;
  }
}

answered Jan 3, 2022 at 15:09

akds

6916 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Is it possible to render inside a functional component in reactjs?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related