React PropTypes.array has keys with type string

Question

My Component has a Property defined as array but i cant iterate the values by numeric keys. It seems that the keys are of type string. Am I missing something?

class Test extends React.Component {
    render () {
        let parse = [];
            for (let i in Object.keys(this.props.test)) {
                parse.push(
                    <div key={i}>
                        {i} {typeof i} {this.props.test[i]}
                    </div>
                )
    }
    return (
        <div> 
            {parse}
        </div>
    )
    }
}

Test.propTypes = {
    test: React.PropTypes.array
}

ReactDOM.render(
   <Test test={["a", "b", "c"]} />, 
   document.getElementById('main') 
);

Shows that the keys of Property Test are strings.

Codepen Example

Even if you write {1: 'foo'}, the 1 will become a string — CodinCat
– CodinCat, Commented Apr 18, 2017 at 10:33
But i defined the Property as ["a", "b", "c"]. And it has PropTypes set to array also. — ugrpla
– ugrpla, Commented Apr 18, 2017 at 10:36
See the docs of Object.keys here: developer.mozilla.org/docs/Web/JavaScript/Reference/… — CodinCat
– CodinCat, Commented Apr 18, 2017 at 10:37

CodinCat · Accepted Answer · 2017-04-18 10:52:04Z

1

In your case, if you want to iterate with numerical keys, just use map, forEach or a classic for i < length loop, here is the map example:

this.props.test.map((el, i) => (
  <div key={i}>
    {i} {typeof i} {el}
  </div>
))

Using non-numerical keys are totally fine. Moreover, sometimes using indexes as keys is not a good idea.

For example if your array may change sorting or delete/insert elements at the beginning or the middle, React may do many unnecessary operations (unmout/re-mount them)

edited Apr 18, 2017 at 10:52

answered Apr 18, 2017 at 10:46

CodinCat

16k6 gold badges51 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Saba · Accepted Answer · 2017-04-18 11:10:05Z

1

You can better organise your code calling map function on your array,

class Test extends React.Component {
  render () {
    const {test} = this.props;

    return (
       <div>
         {test.map((t, i) =>
            <div key = {i}>{i} {typeof i} {t}</div>
         )}
       </div>
    );
   }
}

Test.propTypes = {
  test: React.PropTypes.array
};

ReactDOM.render(
    <Test test={["a", "b", "c"]} />, 
    document.getElementById('main')
);

edited Apr 18, 2017 at 11:10

answered Apr 18, 2017 at 11:01

Saba

3,6662 gold badges24 silver badges35 bronze badges

1 Comment

Mayank Shukla Over a year ago

Object.keys is not required here, its already an array of strings, you can directly use map on this.props.test :)

Collectives™ on Stack Overflow

React PropTypes.array has keys with type string

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related