Passing array value from one class to another

Question

I am new to ReactJs and the issue that I am having is that the array value is not being displayed on the body

class App extends React.Component{
  render(){
    let arr = ["one", "two"]
    arr.map(n => <Append val={n}/>)

    return
       <div></div>
  }
}

class Append extends React.Component{
  render(){

    return(
     <div>
        {this.props.val}
      </div>
     )

  }
}

ReactDOM.render(<App />,document.getElementById("div"))

My goal is to append to the body the two array values.

score 4 · Accepted Answer · answered Jul 22 '17 at 03:51

Well, the div is empty and you are not displaying the result of the map within the div. So that is why you're not seeing anything. One solution is to map append within div. Also, if you want to display the div in the next line, make sure to wrap it in a parenthesis. Otherwise, it will print undefined and ignore the intended return value (the div etc).

class App extends React.Component{
  render(){
    let arr = ["one", "two"]
    return (
       <div>{arr.map(n => <Append val={n}/>)}</div>
    );
  }
}

class Append extends React.Component{
  render(){
    return(
     <div>
        {this.props.val}
      </div>
     );
  }
}

ReactDOM.render(<App />,document.getElementById("div"))

I am getting Uncaught Error: Minified React error #37; – Jul 22 '17 at 04:20 — , Jul 22 '17 at 04:20

Chris Martin · Answer 2 · 2017-07-22T03:39:37.930

You've got two issues here:

1

The elements you're creating with map need to be moved inside the <div> you're returning.

This expression

arr.map(n => <Append val={n}/>)

as a statement has no effect on its own. The map converts a list of strings into a list of <Append> elements, but it doesn't do anything with them.

2

return and <div> need to be on the same line, or you need parentheses like you did in the other render function.

When you write this,

return
   <div></div>

automatic semi-colon insertion takes place, and what actually runs is this:

return;
   <div></div>

So what you're returning is undefined, not the <div> element you wanted.

So the fixed App class looks like this:

class App extends React.Component{
  render(){
    let arr = ["one", "two"];
    return <div>{arr.map(n => <Append val={n}/>)}</div>;
  }
}

I am getting Uncaught Error: Minified React error #37; – Jul 22 '17 at 04:20 — , Jul 22 '17 at 04:20

score 1 · Answer 3 · answered Jul 22 '17 at 03:34

class App extends React.Component{
  render(){
    let arr = ["one", "two"];
   // arr.map(n => <Append val={n}/>); 
    let appendValues = arr.map(n => <Append val={n}/>);

    return
       <div>{appendValues}</div>
  }
}

class Append extends React.Component{
  render(){

    return(
     <div>
        {this.props.val}
      </div>
     )

  }
}

ReactDOM.render(<App />,document.getElementById("div"))

score 1 · Answer 4 · answered Jul 22 '17 at 03:36

1

class App extends React.Component{
  render(){
    let arr = ["one", "two"];
    let numbers = [];
    
    arr.map(n => numbers.push(<Append val={n} key={n} />));

    return (
       <div>{numbers}</div>
    );
  }
}

class Append extends React.Component{
  render(){
    return(
     <div>
        {this.props.val}
      </div>
     );
  }
}

ReactDOM.render(<App />, document.getElementById("div"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>
<div id="div"></div>

answered Jul 22 '17 at 03:36

Alexander Elgin

5,926
4
33
47

I am getting Uncaught Error: Minified React error #37; – Jul 22 '17 at 04:21
@AvaLucas Do you use the minified versions of React and ReactDOM? – Alexander Elgin Jul 22 '17 at 04:24
@AvaLucas That's the reason. Did you check the error message? – Alexander Elgin Jul 22 '17 at 04:27
yes just like i said earlier it says Uncaught Error: Minified React error #37; – Jul 22 '17 at 04:29

Fredrik Christenson · Answer 5 · 2017-07-22T05:13:26.753

As have an extra look at the document.getElementById functions, it looks like your not giving it a correct id for a element on the page but rather the name of a div element.

Then have a look at the array.map, .map returns a new array so your App component needs to render that array inside of the element it returns.

I made a small video about your question and I added some small tips if you are interested: https://youtu.be/I9U8I1Yn4c4

Look at this code to get some ideas and have a great day!

const React = require("react");
const ReactDOM = require("react-dom");

class App extends React.Component {
  render() {
    let arr = ["one", "two"];
    return <ul>{arr.map(n => <Append key={n} val={n} />)}</ul>;
  }
}

class Append extends React.Component {
  render() {
    return (
      <li>
        {this.props.val}
      </li>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("content"));

I am getting Uncaught Error: Minified React error #37; – Jul 22 '17 at 04:23 — , Jul 22 '17 at 04:23

Passing array value from one class to another

5 Answers5

1

2