Odtnhj

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