javascript - React - map array to child component - Stack Overflow

admin管理员组

文章数量:1279087

I'm coding a site with multiple pages. A page ComponentA, have a child ponent that return sections with titles and paragraphs.

The array in ComponentA pass data as props to the child. Inside the child, a map function return the paragraphs correct. What's missing for the titles, how would you do to pass title1 to paragraph1, title2 to paragraph2 and so on?

ComponentA:

import Child from "../ponents/child";

const ComponentA = () => {
  <Layout>
    <h1>Home Page</h1>
    <Child title={info.title} text={info.text} />
  </Layout>
}

const info = {
  title: ["Title1", "Title2"],
  text: ["Paragraph1", "Paragraph2"]
};

Child ponent:

const Child = ({ text, title }) => {
  return (
    <div>
      {text.map(text => {
        return (
          <div>
            <h3>{title}</h3>
            <p>{text}</p>
          </div>
        );
      })}
    </div>
  );
};

I'm coding a site with multiple pages. A page ComponentA, have a child ponent that return sections with titles and paragraphs.

The array in ComponentA pass data as props to the child. Inside the child, a map function return the paragraphs correct. What's missing for the titles, how would you do to pass title1 to paragraph1, title2 to paragraph2 and so on?

ComponentA:

import Child from "../ponents/child";

const ComponentA = () => {
  <Layout>
    <h1>Home Page</h1>
    <Child title={info.title} text={info.text} />
  </Layout>
}

const info = {
  title: ["Title1", "Title2"],
  text: ["Paragraph1", "Paragraph2"]
};

Child ponent:

const Child = ({ text, title }) => {
  return (
    <div>
      {text.map(text => {
        return (
          <div>
            <h3>{title}</h3>
            <p>{text}</p>
          </div>
        );
      })}
    </div>
  );
};

• javascript
• arrays
• reactjs

Share Improve this question Follow edited Mar 24, 2019 at 7:07 kukkuz 42.4k66 gold badges6464 silver badges102102 bronze badges asked Mar 24, 2019 at 6:22 noxstanoxsta 11111 silver badge44 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

Your info object is not an iterable list - so I would convert them into a list {title, text} like so:

const data = info.title.map((e,i) => {
  return {title : e, text: info.text[i]}
})

Now I would shift the map() function to ComponentA instead of Child as that makes the child ponent more meaningful.

See demo below:

const info = {
  title: ["Title1", "Title2"],
  text: ["Paragraph1", "Paragraph2"]
};

const data = info.title.map((e,i) => {
  return {title : e, text: info.text[i]}
})

const ComponentA = () => {
  return (
    <div>
      <h1>Home Page</h1>
      { data.map(item => {
          return (
            <Child key={item.title} title={item.title} text={item.text} />
          );
        })
      }
    </div>
  )
}

const Child = ({ text, title }) => {
  return (
    <div>
      <h3>{title}</h3>
      <p>{text}</p>
    </div>
  );
};

ReactDOM.render(
  <ComponentA/>, 
  document.getElementById('root'));

<script src="https://cdnjs.cloudflare./ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"/>

You can change your children ponent like this, since text is an array so you need to access it values by index.

const Child = ({ text, title }) => {
  return (
    <div>
      {text.map((text,index) => {
        return (
          <div>
            <h3>{title[index]}</h3>
            <p>{text}</p>
          </div>
        );
      })}
    </div>
  );
};

You can even change you parent ponent to something like this

import Child from "../ponents/child";

const ComponentA = () => {
  <Layout>
    <h1>Home Page</h1>
    {info.text.map((text,index)=> <Child title={info.title[index]} text={text} />}
  </Layout>
}

const info = {
  title: ["Title1", "Title2"],
  text: ["Paragraph1", "Paragraph2"]
};

And then your child should be

const Child = ({ text, title }) => {
  return (
    <div>
          <h3>{title}</h3>
          <p>{text}</p>
    </div>
  );
};

You can iterate over text and usnig index access the title

const ComponentA = () => {
  return (
    <div>
      <h1>Home Page</h1>
      <Child title={info.title} text={info.text} />
    </div>
  )
}

const info = {
  title: ["Title1", "Title2"],
  text: ["Paragraph1", "Paragraph2"]
};

const Child = ({ text, title }) => {
  return (
    <div>
      {text.map((text1, index) => {
        return (
          <div>
            <h3>{title[index]}</h3>
            <p>{text1}</p>
          </div>
        );
      })}
    </div>
  );
};

ReactDOM.render(<ComponentA />, document.getElementById('app'));

<script src="https://cdnjs.cloudflare./ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"/>

本文标签： javascriptReactmap array to child componentStack Overflow