# Simple React component to view cached data and test result from API

This is only the front end side of things which I have at the moment, as the back end is still being worked on. But as this is my first attempt at a react component, I'd like to know if there is anything I can improve on it.

The component has a text area for viewing the current data stored in the cache within our application, another text area for viewing the result when we send that data off to our API and get a transformed version of the data back, as well as two buttons: one for loading the cached data into one of the text areas and one for calling the API with the cached data. This component is used in development/UAT environment for testing purposes.

class DataRevealer extends React.Component {
constructor(props) {
super(props);
this.state = {input: '', result: ''};

this.getCachedDataHandler = this.getCachedDataHandler.bind(this);
this.transformDataHandler = this.transformDataHandler.bind(this);
this.inputDataChanged = this.inputDataChanged.bind(this);
}

getCachedDataHandler() {
let cachedData = DataRevealActions.getCachedData();
this.setState({input: cachedData});
}

transformDataHandler() {
if (this.state.input) {
let transformedData = DataRevealActions.transformData(this.state.input);
this.setState({result: transformedData});
} else {
}
}

inputDataChanged(event) {
this.setState({input: event.target.value});
}

get getCachedDataButtonText() {
//TODO: localise string
return 'Get Cached Data';
}

get transformDataButtonText() {
//TODO: localise string
return 'Transform Data';
}

render() {
return (
<div className='data-revealer-container'>
<textarea value={ this.state.input }
className='data-revealer-textarea centred-control'
onChange={ this.inputDataChanged }
/>
<div className='action-buttons centred-control'>
<Button onClick={ this.getCachedDataHandler }
className='data-revealer-button centred-control'>
<span>{ this.getCachedDataButtonText }</span>
</Button>
<Button onClick={ this.transformDataHandler }
className='data-revealer-button centred-control' >
<span>{ this.transformDataButtonText }</span>
</Button>
</div>
<textarea value={ this.state.result }
className='data-revealer-textarea centred-control'
/>
</div>
);
}
}

export default DataRevealer;


Couple of things to note:

• The Button is one of our custom controls, it acts as a normal button but with pre-implemented styling tweaks.
• The TODO may not actually be needed, as the strings may not need to be localised.
• DataRevealActions are where the back-end code will go, once that work is done.

• DataRevealActions would probably be nice to pass in as properties, so the component is configurable. You could pass it in as now, or just have two different properties, getCachedData and transformData.