1

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!

4
  • What do you mean by parameter? What are you trying to do? What does it mean that it's not working? Do you get any errors? Commented Sep 28, 2022 at 16:45
  • Are you familiar with the way React uses props? Commented Sep 28, 2022 at 16:47
  • It would help a lot to add context. Show us Data and how FillData is used. Commented Sep 28, 2022 at 16:50
  • Im sorry: Data is an imported JSON-File and FillData is used to display content out of this JSON-File. I want to use "keyword" as a parameter to be able to use FillData as a function and give it the key in order for it to display the value from the JSON-File Commented Sep 28, 2022 at 17:03

2 Answers 2

1

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>
Sign up to request clarification or add additional context in comments.

2 Comments

If FillData takes keyword instead of props, it won't be a valid React Component.
that might help! can you tell me how i can pass the parameter when i use <FillData />?
0

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'}]

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.