Ndtyjky

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.

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} />

}

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);