CODEWITHSUNDEEP
reactjs
CGriffin
CGriffin

Reputation: 1476

How can I add an unchangeable property to a React JS component?

Suppose I have a React JS component, and for the sake of ease of use, I want that component to have access to an array that maps indexes to text.

For example, let's say that in scenario A I pass the component the ID 1, whereas in scenario B I pass the component the ID 3. I want the component to 'know' what to do with those IDs, so I want the component itself to have an array like the following:

[
    0 => 'Text for scenario 0',
    1 => 'Text for scenario 1',
    2 => 'Text for scenario 2',
]

Now there are two ways that I personally know of that would allow this component to have access to that array. I could define it as part of the state in the constructor:

constructor() {
    this.state = {
        // put the array here
    }
}

Or, I could make it a default prop:

Component.defaultProps = {
    // put the array here
}

Which would then allow the component to access the array from either this.state or this.props.

However, I don't like either of these options, because both allow the array to be changed. If I put it in state, then the array can be changed from (almost) anywhere within the component, and if I put it in props, then the component could be passed an alternative array as a prop.

So: is there a way, in React JS, to define a static, unchangeable property on a component?

Upvotes: 1

Views: 648

Answers (3)

Charles Stover
Charles Stover

Reputation: 1148

You can save variables in more than just state and props, neither of which you want want to use here, since this array is neither the state of the component or a property being passed to it.

You can, as others have said, store the array elsewhere in the file and simply reference it within your component.

You can store the array as a property of your component, and just reference it as this.myArray where needed:

constructor(props) {
  super(props);
  this.myArray = [1, 2, 3];
}

Or, if the array is not going to be changing from one instance of the component to the next, you can store it as a static property of the component and reference it as MyComponent.myArray where needed:

static myArray = [1, 2, 3];

The solution to just place it elsewhere in the file is a good one, especially if it is a const variable or if you may ever want to export and use it elsewhere in your project.

Upvotes: 0

Peter
Peter

Reputation: 1046

Since every module has it's own scope you can just put the array locally in the module of your component (above the component). If you don't export it it will be private

const texts = [
    'Text for scenario 0',
    'Text for scenario 1',
    'Text for scenario 2',
]

export default class MyComponent extends Component {
  ...you can access texts as a const here
}

Upvotes: 2

Luke Glazebrook
Luke Glazebrook

Reputation: 580

You shouldn't put things in the React state that aren't going to be reactive or manipulated in some way and setting it as a default prop is not a great solution either as that implies that sometimes the component will receive a prop of that name.

One solution could be to set up a function which simply returns this list:

getIdList() {
    return [];
}

However, I think the better solution would be to just define it as a const above the React component. Seeing as this data will never be changed it doesn't really need to live within the component itself.

So, that would like something like the following:

const idArray = [];

class SomeReactComponent extends React.Component {

Upvotes: 5

Related Questions