React: Pass Function with JSON Data

Question

I am trying to generate components from a JSON file with React-Native, and am wondering what is the best way to pass a function to a component as a prop?

Example, button requires the prop onPress, so is there a way to pass in a function to the object onPress as I have done here:

{
      component: "Button",
      props: {
            title: "This is the Title",
            onPress: {() => {Alert.alert("Tapped!")}}
      }
}

As this generates an unexpected token error, what is a better way to accomplish this?

Ross Allen · Accepted Answer · 2017-07-09 15:39:01Z

3

You have extra curly brackets around the function declaration that are invalid. Remove those, and you should be good:

{
      component: "Button",
      props: {
            title: "This is the Title",
            onPress: () => {Alert.alert("Tapped!")}
      }
}

answered Jul 9, 2017 at 15:39

Ross Allen

45k14 gold badges100 silver badges97 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Jake Chasan Over a year ago

Thank you for your answer. It seems that this does allow this function to be called, but the "Alert" component is not available as it was called from the data file. Is there a way around this?

LexJacobs Over a year ago

Have you imported or required Alert in the file where it's being called?

Jake Chasan Over a year ago

Yes, but the stack trace shows that the function is being called in the data.json file that currently holds the dummy data. Any ideas?

LexJacobs Over a year ago

Can you change the JSON file to a .js file, and export your config object? Then, perhaps if the import/require of {Alert} is declared in the file where the alert function is defined, it will carry over.

Jake Chasan Over a year ago

I will try that. Eventually, I plan to serve the file remotely. In that case would it even be possible to have the file "export" itself as you recommended?

|

Collectives™ on Stack Overflow

React: Pass Function with JSON Data

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related