How to pass an object with onClick React?

Question

I have an object in an external file and I want to pass the url into the button onClick but I do not know to pass the value.

Object:

const ProjectLists = [

    {
        id: "4",
        iconImage: "",
        name: "Simple",
        description: "Simple is a corporate responsive template and the absolutely clean & modern template theme for your business. The theme was built by Foundation Framework and take advantages of it features: grid system, typography, buttons, form, UI element, section and more.",
        technologies: "HTML, CSS, JavaScript",
        href: "http://striped-dolls.surge.sh"
    }
]

export default ProjectLists;

How to pass ProjectLists.map((project, i) => href in map() into <button>

class Projects extends Component {
  render() {
    return (
      <div>
        {ProjectLists.map((project, i) =>

        <section className='section'>
          <div className='row'>
            <div className='col-sm'>
              <div className='content-left'>
                <p key={project.id + i}>
                  {project.iconImage}
                </p>
              </div>
            </div>
            <div className='col-sm-8'>
              <div className='content-right text-left'>
                <h1>{project.name}</h1>
                <p>{project.description}</p>
                <p>Technologies: {project.technologies}</p>
                <button type='submit' onClick=() => </button>>View live</button>
              </div>
            </div>
          </div>
        </section>
        )}
      </div>
    )
  }
}

Thank you for your help!

You want to redirect to the link or use button for this purpose. — Mayank Bansal, Jan 21 '19 at 06:13
you can use from this link : https://stackoverflow.com/questions/43804032/open-url-in-default-web-browser — mohammad javad ahmadi, Jan 21 '19 at 06:55

Mayank Bansal · Answer 1 · 2019-01-22T05:13:30.970

0

You can use "a" tag for this purpose.

<a href={project.href}></a>

If you want to use onClick in your button, then you can try this.

onClick={() => { window.location.href = project.href }}

edited Jan 22 '19 at 05:13

answered Jan 21 '19 at 06:21

Mayank Bansal

1,755
2
9
22

This solution is working but I would like to know how to pass `{project.href}` in `onClick()`. Could you provide an example please? – passion Jan 21 '19 at 14:18

Dominic · Answer 2 · 2019-01-21T14:58:48.440

0

You can pass extra data in your map using arrow functions:

{ProjectLists.map(project =>
  <button onClick={onProjectClick(project)}>View live</button>
}

// e.g.
onProjectClick = project => event => {
  console.log(project.description);
  navigateTo(project.href);
}

I noticed your button has type="submit" so more the correct event to handle is onSubmit on the form element however as this handles pressing the Return key for example (it's not essential though).

edited Jan 21 '19 at 14:58

answered Jan 21 '19 at 14:53

Dominic

62,658
20
139
163

Thank you but I want to pass it in the ` – passion Jan 21 '19 at 14:58
Not sure what you mean by that, I just showed you how to pass the project data into the button onClick event?? – Dominic Jan 21 '19 at 15:07
I am a beginner with React. I am sorry if I do not understand it all. Where do I add this function to the `class Projects`? ``` onProjectClick = project => event => { console.log(project.description); navigateTo(project.href); } ``` – passion Jan 21 '19 at 15:17
I add `onProjectClick` before `render()` but it keeps show errors! – passion Jan 21 '19 at 15:38
You should add it on the same level as render() (before or after shouldn't matter) but maybe you are not using `@babel/plugin-proposal-class-properties` in your project, in that cause you would get an error. I highly recommend using it as it makes working with event callbacks a lot cleaner in React – Dominic Jan 21 '19 at 15:48
For beginner, always use https://github.com/facebook/create-react-app, then you dont have to worry about babel most of the time – Alvin Theodora Jan 21 '19 at 16:10

score 0 · Answer 3 · answered Jan 23 '19 at 19:31

0

  state = {
    redirect: false
  }
  setRedirect = (href) => {
    window.location.href = href;
  }

Call the setRedirect function

<button onClick={()=>this.setRedirect(project.href)}>View live</button>

answered Jan 23 '19 at 19:31

passion

61
2
9

How to pass an object with onClick React?

3 Answers3