Reactjs - integrating rich text editor lost scope of state - reactjs

Question

I am new to reactjs - and I am trying to integrate a rich text editor into a component. The component itself is a bit complex and contains various logic to loop through a json fragment.
I'd like to place the rich text editor inside the component - but when I put the code to invoke it inside -- I loose scope of the this -- it complains on the this.state.
This is the rich text editor markup
<RichTextEditor
value={this.state.value}
onChange={this.onChange}
toolbarConfig={toolbarConfig}
/>
this is the current code
return (
<div>
<MetaSpecific title={lang.metaData.title} description={lang.metaData.description} />
<Intercom appID='bg69flze' custom_launcher_selector='.open_intercom' />
<Spacers />
<RichTextEditor
value={this.state.value}
onChange={this.onChange}
toolbarConfig={toolbarConfig}
/>
<div className='background--white background--white--medium background--white--small'>
{
lang.status[0].items.map(function (item, index) {
return (
<div key={index}>
{
(lang.status[0].dashboard === 'expert')
// after interview section - professional
? <Expert lang={lang} item={item} />
// after interview section - employer
: (lang.status[0].dashboard === 'employer')
? <Employer lang={lang} item={item} />
: null
}
<Row type='flex' justify='center' className='border__transparent--top' style={{maxWidth: '1200px', marginLeft: 'auto', marginRight: 'auto'}}>
<form>
{
(lang.status[0].dashboard === 'employer')
// after interview section - professional
? <EmployerPanel lang={lang} />
: null
}
<Col xs={24} md={24} lg={24} style={{background: '#eff2f4', padding: '50px 65px 0'}}>
<div className='' style={{background: '#ffffff', padding: '30px'}}>
<h3 style={{paddingBottom: '30px'}}>Shareholder agreement for a UK startup</h3>
<Row>
<Col xs={7} md={7} lg={7}>
<h3 style={{paddingBottom: '30px'}}>Projektfrist</h3>
</Col>
<Col xs={5} md={5} lg={5}>
16 June 2017
</Col>
</Row>
<h3 style={{paddingBottom: '30px'}}>Projektbeschreibung</h3>
<p className='text--font-size-14'>This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description</p>
<p className='text--font-size-14'>This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description</p>
</div>
</Col>
<Col xs={24} md={24} lg={24} style={{background: '#eff2f4', padding: '50px 65px 0'}}>
<div className='' style={{background: '#ffffff', padding: '30px'}}>
<h3 style={{paddingBottom: '30px'}}>Vorschlag zur Provision</h3>
<Row>
<Col xs={7} md={7} lg={7}>
Vergutungsmodell
</Col>
<Col xs={5} md={5} lg={5}>
Fixed rate
</Col>
</Row>
<br />
<Row>
<Col xs={7} md={7} lg={7}>
Fix Vergutung exkl. MwSt. (€)
</Col>
<Col xs={5} md={5} lg={5}>
<Input placeholder='Final Price' style={{border: '1px solid #c5c8cf'}} />
</Col>
</Row>
<Row>
<Col xs={7} md={7} lg={7}>
Ihr angestrebtes Projecktende
</Col>
<Col xs={5} md={5} lg={5}>
<Input placeholder='16/06/2017' style={{border: '1px solid #c5c8cf'}} />
</Col>
</Row>
</div>
</Col>
<Col xs={24} md={24} lg={24} style={{background: '#eff2f4', padding: '50px 65px 0'}}>
<div className='' style={{background: '#ffffff', padding: '30px'}}>
<h2 className='text--font-size-14'>Beschreibung de Angebots</h2>
<h2 className='text--font-size-14'>xx xx xx xx xx xx</h2>
<p className='text--font-size-14'><Input type='textarea' rows={4} /></p>
<p>RICH TEXT</p>
</div>
</Col>
<Col xs={24} md={24} lg={24} style={{background: '#eff2f4', padding: '50px 65px'}}>
<div className='' style={{background: '#ffffff', padding: '30px'}}>
<h2 className='text--font-size-14'>Mandatscereinbarung</h2>
<Input type='submit' value='PDF hochladen' style={{width: '200px', color: '#ffffff'}} />
</div>
</Col>
</form>
</Row>
</div>
)
})
}
</div>
</div>
)
but when I try and place the rich text editor in the correct part of the markup it breaks and looses scope on the this.
return (
<div>
<MetaSpecific title={lang.metaData.title} description={lang.metaData.description} />
<Intercom appID='bg69flze' custom_launcher_selector='.open_intercom' />
<Spacers />
<div className='background--white background--white--medium background--white--small'>
{
lang.status[0].items.map(function (item, index) {
return (
<div key={index}>
{
(lang.status[0].dashboard === 'expert')
// after interview section - professional
? <Expert lang={lang} item={item} />
// after interview section - employer
: (lang.status[0].dashboard === 'employer')
? <Employer lang={lang} item={item} />
: null
}
<Row type='flex' justify='center' className='border__transparent--top' style={{maxWidth: '1200px', marginLeft: 'auto', marginRight: 'auto'}}>
<form>
{
(lang.status[0].dashboard === 'employer')
// after interview section - professional
? <EmployerPanel lang={lang} />
: null
}
<Col xs={24} md={24} lg={24} style={{background: '#eff2f4', padding: '50px 65px 0'}}>
<div className='' style={{background: '#ffffff', padding: '30px'}}>
<h3 style={{paddingBottom: '30px'}}>Shareholder agreement for a UK startup</h3>
<Row>
<Col xs={7} md={7} lg={7}>
<h3 style={{paddingBottom: '30px'}}>Projektfrist</h3>
</Col>
<Col xs={5} md={5} lg={5}>
16 June 2017
</Col>
</Row>
<h3 style={{paddingBottom: '30px'}}>Projektbeschreibung</h3>
<p className='text--font-size-14'>This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description</p>
<p className='text--font-size-14'>This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description. This is the project description</p>
</div>
</Col>
<Col xs={24} md={24} lg={24} style={{background: '#eff2f4', padding: '50px 65px 0'}}>
<div className='' style={{background: '#ffffff', padding: '30px'}}>
<h3 style={{paddingBottom: '30px'}}>Vorschlag zur Provision</h3>
<Row>
<Col xs={7} md={7} lg={7}>
Vergutungsmodell
</Col>
<Col xs={5} md={5} lg={5}>
Fixed rate
</Col>
</Row>
<br />
<Row>
<Col xs={7} md={7} lg={7}>
Fix Vergutung exkl. MwSt. (€)
</Col>
<Col xs={5} md={5} lg={5}>
<Input placeholder='Final Price' style={{border: '1px solid #c5c8cf'}} />
</Col>
</Row>
<Row>
<Col xs={7} md={7} lg={7}>
Ihr angestrebtes Projecktende
</Col>
<Col xs={5} md={5} lg={5}>
<Input placeholder='16/06/2017' style={{border: '1px solid #c5c8cf'}} />
</Col>
</Row>
</div>
</Col>
<Col xs={24} md={24} lg={24} style={{background: '#eff2f4', padding: '50px 65px 0'}}>
<div className='' style={{background: '#ffffff', padding: '30px'}}>
<h2 className='text--font-size-14'>Beschreibung de Angebots</h2>
<h2 className='text--font-size-14'>xx xx xx xx xx xx</h2>
<p className='text--font-size-14'><Input type='textarea' rows={4} /></p>
<RichTextEditor
value={this.state.value}
onChange={this.onChange}
toolbarConfig={toolbarConfig}
/>
</div>
</Col>
<Col xs={24} md={24} lg={24} style={{background: '#eff2f4', padding: '50px 65px'}}>
<div className='' style={{background: '#ffffff', padding: '30px'}}>
<h2 className='text--font-size-14'>Mandatscereinbarung</h2>
<Input type='submit' value='PDF hochladen' style={{width: '200px', color: '#ffffff'}} />
</div>
</Col>
</form>
</Row>
</div>
)
})
}
</div>
</div>
)