CODEWITHSUNDEEP
javascriptreactjsecmascript-6
Dave
Dave

Reputation: 53

Running a function on props in a ReactJs Component

There are a bunch of excellent answers here on SO but I am having trouble applying them to my circumstances as I am quite new to React. I have a component and into that component is passed a single record that holds data about a website visitor. On one of those fields I would like to apply a function that resides in an external file. The code below gives a runtime error in Chrome Developer Tools Cannot read property 'prettyUserAgent' of undefined

ActivityTable.js

import React, { Component } from 'react';
import { StringManipulation } from '../../helpers/stringManipulation';

export class ActivityTableItem extends Component {
  constructor() {
    super();
    this.state = { userAgent: '' }
  }

  render() {
    return (
        <tr onClick={(e) => { e.preventDefault(); }}>
          <td>
            <div>{ this.props.activity.websiteUri }</div>
          </td>
          <td>
            <div>{ this.props.activity.ipAddress }</div>
          </td>
          <td>
            <div className="small text-muted">{ StringManipulation.prettyUserAgent(this.props.activity.userAgent) }</div>
          </td>
          <td className="text-center">
            <img src={'/img/flags/USA.png'} alt="USA" style={{height: 24 + 'px'}}/>
          </td>
          <td>
            <div>{ this.props.activity.createdAt }</div>
          </td>
        </tr>
    )
  }
}

StringManipulation.js

import UAParser from 'ua-parser-js';

// Create a pretty string to display main details from a user agent
export const prettyUserAgent = (str) => {
  const parser = new UAParser();
  const result = parser.setUA(str).getResult();
  const browser = result.browser;
  return result.browser;
};

I understand why this error is happening, the function is being called on the data before it exists, but not how to fix it. I have tried all sorts of variations on using componentDidMount, etc. but without any luck at all.

Upvotes: 0

Views: 326

Answers (2)

Anthony Kong
Anthony Kong

Reputation: 40654

You did not import correctly. You should use this in ActivityTable.js

import { prettyUserAgent } from '../../helpers/stringManipulation';

Then the code should be changed to 

div className="small text-muted">{ prettyUserAgent(this.props.activity.userAgent) }</div>

Upvotes: 2

zenwraight
zenwraight

Reputation: 2000

I am not sure whether this method would work or not but here is a try, as you are providing a default value to useragent your error code part could look like this

StringManipulation.prettyUserAgent(this.state.userAgent)

And your state part could look like this

var userAgentValue = this.props.activity.userAgent != undefined  ? this.props.activity.userAgent : ''
this.state = { userAgent: userAgentValue }

So it will get a string '' value even if the activity.userAgent is not defined.

I cannot execute it and check but seems like a logical solution to me, please correct me if I am thinking in the wrong direction.

Upvotes: 0

Related Questions