passing returned data from an exported function to a React component

Question

I have a function defined in file 'utils.js' like this:

export function get_data() {
    return "some_data";
}

I also have my react component defined as follows in file 'myComponent.js':

import * as utils from './utils.js';

class clab_redux_form extends Component {

  constructor(...args) {
    super(...args);

    this.state = { returned_data : "" };

  }

  handleSubmit(event) {
    event.preventDefault();
    event.stopPropagation();
    this.state.returned_data = utils.get_data();
  }
..
...
.....
......
}

However, 'this.state.returned_data' is set to undefined. I am suspecting I am not getting the returned value correctly from the exported function 'get_data()'. Any ideas how to fix this?

Update 04/03/2019 (Adding the render method per request from comments):

  render() {
    const { field_style, invalid_style, owner_userid, owner_email, description, start_datetime, end_datetime, resources, api_res, resource_labels } = this.state;

    return (
      <Form style={{ marginTop : '2px', marginLeft : '50px', backgroundColor : 'WhiteSmoke'} }
        noValidate
        validated={validated}
        onSubmit={e => this.handleSubmit(e)}
      >

          <Form.Group as={Col} md="4" controlId="validationCustom01">
              <Form.Label>Owner Userid</Form.Label>
              <Form.Control
                  required
                  type="text"
                  placeholder="Owner Userid"
                  style={this.state.field_style}
                  onChange={e => this.handleChange(e,'owner_userid')}
                  defaultValue={this.state.owner_userid}/>
          </Form.Group>

          <Form.Group as={Col} md="4" controlId="validationCustom01">
              <Form.Label>Email</Form.Label>
              <Form.Control
                  required
                  type="email"
                  placeholder="Email"
                  style={this.state.field_style}
                  onChange={e => this.handleChange(e,'owner_email')}
                  defaultValue={this.state.owner_email}/>
          </Form.Group>
          <Form.Group as={Col} md="4" controlId="validationCustom01">
              <Form.Label>Description</Form.Label>
              <Form.Control
                  required
                  type="text"
                  placeholder="Description"
                  onChange={e => this.handleChange(e,'description')}
                  style={this.state.field_style}/>
          </Form.Group>

          <Form.Row>
          <Form.Group as={Col} md="4" controlId="validationCustom01">
              <Form.Label>Start Date/Time</Form.Label>
              <Form.Control
                  required
                  type="datetime-local"
                  placeholder="Start Date/Time"
                  style={this.state.field_style}
                  onChange={e => this.handleChange(e,'start_datetime')}
                  defaultValue={this.state.start_datetime}/>
          </Form.Group>

          <Form.Group as={Col} md="4" controlId="validationCustom01">
              <Form.Label>End Date/Time</Form.Label>
              <Form.Control
                  required
                  type="datetime-local"
                  placeholder="End Date/Time"
                  style={this.state.field_style}
                  onChange={e => this.handleChange(e,'end_datetime')}
                  defaultValue={this.state.end_datetime}/>
          </Form.Group>
          </Form.Row>
          <Form.Group as={Col} md="4" controlId="validationCustom01">
              <Form.Label>Select Resource(s) </Form.Label>
              <Typeahead
                  id="typeahead"
                  clearButton
                  //defaultSelected={options.slice(0, 9)}
                  labelKey="label"
                  multiple
                  options={options}
                  style = {{ backgroundColor : 'white', width : '380px' , marginLeft : '5px' , height : '280px'}}
                  onChange={selectedData => this.handleChange(selectedData,'resources')}
                  placeholder="Choose resource(s) ..."
              />

          </Form.Group>

          <Button type='submit' style = {{ color : 'white', borderColor : 'white', borderRadius: '10px', fontSize: '15px', padding: '5px 12px', backgroundColor : 'SteelBlue', marginLeft : '25px' , marginTop : '15px', fontSize : '15px', border: '2px solid white' }}>Submit</Button>

          <Button style = {{ color : 'white', borderColor : 'white', borderRadius: '10px', fontSize: '15px', padding: '5px 12px', backgroundColor : 'Tomato', marginLeft : '10px' , marginTop : '15px', fontSize : '15px', border: '2px solid white' }}>Cancel</Button>

      </Form>
    );
  }

Answer 1

To update the state in class components you should use setState() method

handleSubmit(event) {
    event.preventDefault();
    event.stopPropagation();
    this.setState({returned_data : myData()})
}

The way you are doing you just mutating the state. This is considered anti pattern. See here more details about it.

See this question about immutability in Js