CODEWITHSUNDEEP
javascriptreactjstypescript
ujjwal
ujjwal

Reputation: 498

React/JS - Data Modelling

I am relatively new to React. I am using CRA in few of our web apps in production.

Previously, I have worked extensively in Swift. I am familiar with OOP concepts and I want to somehow implement models in React.

Sample Container:

class sampleContainer extends React.Component {
    state = {
        activity: null
    }

    sampleFun = (val1, val2) => {
     ...
    }

    componentDidMount() {
        Axios.get(`url`)
            .then(res => {
                let activity = {
                    "name": res.data.data.name,
                    "type": res.data.data.type
                }
                this.setState({ activity })
            })
            .catch(e => {
                // ...
            });
    }

    render() {
        return (
            <React.Fragment>
                {this.state.activity && (
                    <sampleComponent activity={this.state.activity}
                     sampleFun = {this.sampleFun}></sampleComponent>)
                }
            </React.Fragment>
        )
    }

}

Sample component:

class sampleComponent extends React.Component {
    render() {
        const { activity } = this.props
        // Typing "activity." should suggest me "name" and "type"
        return (
            <React.Fragment>
                {/* ... */}
            </React.Fragment>
        )
    }
}

I am using VSCode editor. What I want to do is that, when I receive props in component, I want to know the definition of functions ("sampleFun") and objects ("activity" in my case).

I know this can be done through TypeScript but porting our complete project from Javascript to Typescript would not be possible.

Please suggest me how can I achieve it.

Upvotes: 1

Views: 1249

Answers (2)

Sir Codes Alot
Sir Codes Alot

Reputation: 1169

https://codesandbox.io/s/red-shadow-0cskw?file=/components/SampleComponent.js

import React, { Component } from "react";
import PropTypes from "prop-types";
class SampleComponent extends Component {
  render() {
    const { activity, sampleFun } = this.props;
    return (
      <>
        {`The activity you have selected is ${activity.name}. ${sampleFun(
          activity.name,
          activity.type
        )}`}
        <br />
        {`Activity is ${typeof activity}`}
        <br />
        {`Activity is ${typeof sampleFun} and I have ${sampleFun.arguments}`}
        <br />
        {`And my function looks like ${sampleFun.toString()}`}
      </>
    );
  }
}
SampleComponent.prototypes = {
  activity: PropTypes.shape({
    name: PropTypes.string.isRequired,
    type: PropTypes.string.isRequired
  }),
  sampleFun: PropTypes.func.isRequired
};
export default SampleComponent;

Put together an example with proptypes and typeof. Are you looking to do something specific if you know the type?

Upvotes: 0

anuj kumar
anuj kumar

Reputation: 11

Yes, you can use PropTypes in React.

sampleComponent.propTypes = {
activity: PropTypes.shape({
    name: PropTypes.string,
    number: PropTypes.number
    })
};

Check the example for your reference: Example

Upvotes: 1

Related Questions