How to use a parameter in ReactJS-CodePudding

Im pretty new to coding with JS/REACT. Can someone tell me why the parameter "keyword" in the following code isnt working as a parameter? Thank you!


function FillData(keyword) {
    return <div className="App">
                {
                    Data.map( datan => {
                        return(
                            <div className="box">
                            
                                {datan.keyword}
                                
                            </div>
                        )
                    } )
                }
    </div>
}

Tank you very much in advance!

CodePudding user response：

Is this what your are looking for?

function FillData(keyword) {
    return <div className="App">
        {Data.map(datan => (
            <div className="box">
                {datan[keyword]}
            </div>
        ))}
    </div>
}

If FillData is to be used as a component, you might need this instead:

function FillData(props) {
    return <div className="App">
        {Data.map(datan => (
            <div className="box">
                {datan[props.keyword]}
            </div>
        ))}
    </div>
}

Then you can use FillData like this:

<div><FillData keyword="foo" /></div>

CodePudding user response：

I would suggest you provide more context in your code to make it more readable:

If keyword is a prop which is supposed to extract a value from a key on an object then you do need to use the square bracket notation to extract the value from an object. In JavaScript unlike in many other languages you can use square brackets with a string key to extract values from an object or you can use dot notation to extract a hardcoded string key. For example, myObj.keyword will only ever get values at the key with the string name "keyword". It is equivalent to: myObj["keyword"]. You might be hoping to extract a dynamic keyword from myObj. To do that you'll need to use myObj[someKeyName] and then you can dynamically define `var someKeyName = "what ever I want" (and allow it to be reassigned).

 {
                    Data.map( datan => {
                        return(
                            <div className="box">
                                {datan[keyword]}
                            </div>
                        )
                    } )
                }

But this would only work if keyword came back as a string. I recommend you console.log what keyword is and what its value is to make sure it is what you expect.

In React, all props come in under an object generally referred to as props. So in order to just get the keyword prop from your object you'll need: props.keyword or you can use destructuring to extract the keyword key value from the props object. So in all likelihood you meant to do: function FillData({ keyword }) { which would destructure the "keyword" out of the props object. I would also recommend calling it the objectKey instead of keyword which could be a lot more ambiguous.

I'm still not positive what you wanted to achieve, but most likely this will do something:

function FillData({ keyword }) {
// to make sure: I'd recommend:
// I'm not sure what Data is but I hope that it is an array.

// It is also possible that Data has not been resolved as a promise yet.
// For the following to work Data should be an array of objects
// all which have the dynamic `key` in the object.
// you should be able to do Data[0][keyword] and see a string.
console.log(keyword, Data)
    return (<div className="App">
                {Data.map( datan => {
                        return(
                            <div className="box">
                                {datan[keyword]}
                            </div>
                        )
                    })
                }
    </div>)
}

This would work if you provide something like: <FillData keyword="name" />. Also, it assumes Data is defined as an array of objects with the name key filled like: Data = [{name: 'hi' }, { name: 'something'}]