CODEWITHSUNDEEP
javascriptarraysreactjsobjectecmascript-6
Casterly
Casterly

Reputation: 73

Can't 'map' an array in array of objects correctly in reactjs

I have an array of objects (here is only one but thats does not matter) in my JSON "dummy" back end. In each object I have a property "tags" which also contains simple array, let me show you an example

[
 {
  "title": "Get up and run",
  "author": "Johnny",
  "tags": ["react", "javascript"]
 }
]

I tried to map an array which gave me a result: (see the code)

Article title: Get up and run
Writer: Johnny
Tags: reactjavascript

but i want to get result like that:

Article title: Get up and run
Writer: Johnny
Tags: react javascript (or "react, javascript" or "#react #javascript")

it seems I can't map "tag" array and main array of objects correctly same time. :( can u help me?

class Content extends Component {
 state = {
    posts: []
}

componentDidMount () {
    axios.get("json-file.json")
    .then(response => {
            this.setState({posts: response.data.map(post => {
                return post; /*here I get the whole data from dummy 
backend */
            })})
        }
    )
}

render () {
    const post = this.state.posts.map(post => {
        return <Post 
            title={post.title} 
            date={post.date} 
            author={post.author}
            tags={post.tags.map(xTag => {
                return xTag ;
            })} /* I have other Component which correctly renders this... 
 no worries here */
            />
    })

    return (
        <div>
            {post}
        </div>
    )
}
}

I expect the better "map" of array I try to get result like this

Article title: Get up and run Writer: Johnny

Tags: react javascript (or "react, javascript" or "#react #javascript")

instead of 

Tags: reactjavascript

or

Tags: ["react", "javascript"] (it was the worst version :)(its fixed ;) ) )

I want to map an array of objects and 'tags' array at same time and correctly,

How can I do that?

Upvotes: 1

Views: 1037

Answers (3)

Berouminum
Berouminum

Reputation: 530

If you want to convert your tags array into a string there are several options depending on your desired format:

Using a simple join your formatting is limited: (You can pass in characters which will be appended after every entry e.g .join(' ') for only spaces)

post.tags.join() // Returns 'react,javascript'

Using the reduce function you have further control over how your string will be formatted:

post.tags.reduce((string, tag) => string += `${tag} `, '')

To change the format just edit the string which is attached ${tag}

Upvotes: 0

user11483010
user11483010

Reputation:

You can create a separate component for tag and style it. Then rewrite this line:

tags={post.tags.map(xTag => {
    return <Tag>{xTag}</Tag>;  // or <Tag content={xTag} />
})}

Upvotes: 0

Marouane Fazouane
Marouane Fazouane

Reputation: 1329

Doing tags={post.tags.map(xTag => { return xTag ; })} is equivalent to tags={post.tags}. So the relevant code that affects the final formatting is in Post component. So could either do tags.join(', ') or tags.map(t => '#'+t).join(' ').

Upvotes: 1

Related Questions