CODEWITHSUNDEEP
reactjs
tegradite
tegradite

Reputation: 69

How to render a component inside render method?

I have a react app like this

import Modal from 'some-component'


class Blog extends React.Component {



render () { 
 <Modal title='' content='' onOk='' onClose=''/> 
 <SomeComponent> </SomeComponent>
}

}

I am trying to use a separate function to render the modal, and call that function inside the render method like this

...
renderModal = () => {}

render() {
 // call renderModal here
 <SomeComponent> </SomeComponent>
}

but it doesn't work

Upvotes: 1

Views: 66

Answers (2)

Anh Tuan
Anh Tuan

Reputation: 1143

render () { 
  return (
   <Modal title='' content='' onOk='' onClose=''/> 
   <SomeComponent> </SomeComponent>
  )
}

you should wrap them in a parent element =>

render () {
  return (
     <>
      <Modal title='' content='' onOk='' onClose=''/> 
      <SomeComponent> </SomeComponent>
     </>
  )
}

then you can use 

renderModal = () => <Modal title='' content='' onOk='' onClose='' />

render () { 
 return (
  <>
   {this.renderModal()}
   <SomeComponent> </SomeComponent>
  </>
  )
 }

Upvotes: 2

Shoeb Mirza
Shoeb Mirza

Reputation: 918

renderModal = () => {
return (........your html....);
}
render () {
   {this.renderModal()};
}

You can use this code to get what you are asking..

Upvotes: 3

Related Questions