Converting array to string fails in react render -Javascript/React

Question

I want to convert an array prop into a string:

   export default class MyComp extends React.Component {
    render() {
        let type = this.props.type; // [".abc",".ded",".ted"];
        newType = type.join();
//o/p: newType= ".abc,.ded,.ted"

console.log(newType) // ".abc,.ded,.ted"
    return (
      <div>
      <input type="file" accept={newType}/> //here throws error 
    </div>
    )

    }

}

export default class SubComp extends React.Component{
   render() {
     <Mycomp type={[".abc",".ded",".ted"]}/>

 }
}

when I try to access newType as a values to the accept html, it throws: TypeError: Cannot read property 'join' of undefined. One thing I checked here if I try to pass the hard code values to newType it gets working fine. Only when Im trying to convert the array to string using .join() or .toString(), it fails.

render() {
            let type = this.props.type; // [".abc",".ded",".ted"];
            newType = ".abc,.ded,.ted";
        return (
          <div>
          <input type="file" accept={newType}/> //Works Fine!!!! 
        </div>
        )

        }

Any idea what may be causing the issue?

did you console.log out type? after getting it from the props? — incorelabs
– incorelabs, Commented Oct 10, 2018 at 20:51
yes, the type is an array and newType get converted to string — user1234
– user1234, Commented Oct 10, 2018 at 20:53
please share the code from where you are passing props. it seems like type is undefined. — mkb
– mkb, Commented Oct 10, 2018 at 20:53

Herohtar · Accepted Answer · 2018-10-10 21:15:22Z

There are actually two problems with your code in the example:

You have to use curly brackets around prop values that aren't strings, so it should look like this: <Mycomp type={[".abc",".ded",".ted"]} />
You assign the joined array to newType, but then use newtype in your input tag (note the capitalization difference)

The corrected code would look like this:

export default class MyComp extends React.Component {
  render() {
    let type = this.props.type;
    let newType = type.join();
    return (
      <div>
        <input type="file" accept={newType}/>
      </div>
    )
  }
}

export default class SubComp extends React.Component {
  render() {
    <Mycomp type={[".abc",".ded",".ted"]} />
 }
}

Andre Knob · Accepted Answer · 2018-10-10 21:01:32Z

1

You need to set your type prop using curly brackets {}, like so:

 <Mycomp type={[".abc",".ded",".ted"]}/>

answered Oct 10, 2018 at 21:01

Andre Knob

8317 silver badges8 bronze badges

Comments

Renato Lucas Chitolina · Accepted Answer · 2018-10-10 21:03:14Z

1

Try to pass the array to prop like this

<Mycomp type={[".abc",".ded",".ted"]} />

answered Oct 10, 2018 at 21:03

Renato Lucas Chitolina

1461 silver badge7 bronze badges

Comments

Siyavash · Accepted Answer · 2018-10-10 21:40:16Z

1

You should pass data to props like this

export default class MyComp extends React.Component {
    render() {
        let type = this.props.type; // [".abc",".ded",".ted"];
        let newType = type.join()//converts to string: ".abc,.ded,.ted"
    return (
      <div>
      <input type="file" accept={newType}/> //here throws error 
    </div>
    )

    }

}

export default class SubComp extends React.Component{
   render() {
     <Mycomp type={[".abc",".ded",".ted"]}/>

 }
}

edited Oct 10, 2018 at 21:40

answered Oct 10, 2018 at 21:01

Siyavash

9901 gold badge11 silver badges25 bronze badges

Collectives™ on Stack Overflow

Converting array to string fails in react render -Javascript/React

4 Answers 4

Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Related