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

score 1 · Accepted Answer · answered Apr 03 '19 at 00:21

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

answered Apr 03 '19 at 00:21

Dupocas

20,285
6
38
56

thanks so much for the quick response! it still does not change 'returned_data'. I think it has to do with 'get_data()' being an externally imported function from another file. This is the actual line I added based on your recommendation: this.setState({returned_data : utils.get_data()}); – mbenhalima Apr 03 '19 at 00:39
could you post your render method? – Dupocas Apr 03 '19 at 00:50
Where the state appears undefined? – Dupocas Apr 03 '19 at 00:50
it is showing as undefined inside the handleSubmit method when i do: console.log("returned_data: %O", this.state.returned_data); – mbenhalima Apr 03 '19 at 14:06
I just added the render method in the original post – mbenhalima Apr 03 '19 at 14:15
Just solved this. This was an issue with the Axios library. It seems like creating a fuction with axios.get inside it needs more massaging to return the data. More details in here: https://stackoverflow.com/questions/48980380/returning-data-from-axios-api thanks so much for your help! – mbenhalima Apr 03 '19 at 16:51

passing returned data from an exported function to a React component

1 Answers1