将数组值从一个类传递到另一个类

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.

Answer 1

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"))

Answer 2

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>;
  }
}

Answer 3

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"))

Answer 4

 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> 

Answer 5

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"));