Using a functional component within a class

Question

I'm wondering how I can create a stateless component within a class. Like if I use these functions outside the class, my page renders, but when I put them in the class. My page doesn't render. I want them to be inside the class so I can apply some class props to them.

class helloClass extends React.Component {
  state = {
  };
  Hello =({ items}) => {
    return (
      <ul>
        {items.map((item, ind) => (
          <RenderHello
            value={item.name}    
          />
        ))}
      </ul>
    );
  }

  RenderHello = ({ value }) => {
    return (
      <div>
        {open && value && (
          <Hello
            value={value}  
          />
        )}
      </div>
    );
  }
  render() {

  }
}

export default (helloClass);

I have a setup like this. But not actually like this. And I keep getting the error that Hello and RenderHello do not exist. However, if I turn these into functions outside of the class, they work and everything renders on my page. I just want to know how I can achieve the same but within a class. If that's even possible.

Hi there. Can you please edit the code to be more like your actual setup? For example, seeing how your render method is implemented sounds pretty critical to solving this question. — Matthew Herbst
– Matthew Herbst, Commented Nov 15, 2018 at 2:27
Is there a reason you want a stateless component inside a class component ? — Edwin Harly
– Edwin Harly, Commented Nov 15, 2018 at 2:55

Matt Carlotta · Accepted Answer · 2018-11-15 04:21:13Z

3

Several ways of doing it, but the cleanist is to separate the stateless functions into it's their own files and have a single container that handles state and props and passes them down to the children:

Hello.js (displays the li items)

import React from 'react';

export default ({ items }) => (
  <ul>
    {items.map((item, ind) => (
      <li key={ind}>
         {item.name}
      </li>
    ))}
  </ul>
);

RenderHello.js (only returns Hello if open and value are true)

 import React from 'react';
 import Hello from './Hello';

 export default ({ open, value, items }) => (
   open && value
     ? <Hello items={items} />
     : null
 );

HelloContainer.js (contains state and methods to update the children nodes)

 import React, { Component } from 'react';
 import RenderHello from './RenderHello';

 class HelloContainer extends Component {
   state = {
     items: [...],
     open: false,
     value: ''
   };

   ...methods that update the state defined above (ideally, these would be passed down and triggered by the child component defined below)

   render = () => <RenderHello {...this.state} />
}

edited Nov 15, 2018 at 4:21

answered Nov 15, 2018 at 2:56

Matt Carlotta

19.8k5 gold badges42 silver badges56 bronze badges

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

1 Comment

AnneJoday Over a year ago

Thank you, this is exactly the solution I needed!

Robsonsjre · Accepted Answer · 2018-11-15 02:37:27Z

0

Its strange because you have a recursive call that will end up in a infinite loop, but syntactically, it would be something like that:

class helloClass extends React.Component {
    state = {
    };
Hello(items) {
    return (
      <ul>
        {items.map((item, ind) => (
          {this.RenderHello(item.name)}

        ))}
      </ul>
    );

  }

 RenderHello(value) {
     return (
       <div>

         {open && value && (
           {this.Hello(value)}
         )}
       </div>
     );
   }
   render() 

   {

   }
 }

 export default (helloClass);

edited Nov 15, 2018 at 2:37

answered Nov 15, 2018 at 2:32

Robsonsjre

1,57112 silver badges19 bronze badges

Collectives™ on Stack Overflow

Using a functional component within a class

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related