passing function between a parent component and child component problem

0
votes

i m trying pass a function from parent component to child component , i know it is so basic , however there is a problem i couldn t figure out . everytime i try to pass a props to child component it doesn t work giving this error:

Line 37:52:  Parsing error: Unexpected token

  35 |             <div className="event-list">
  36 |             <button  onClick={this.handleForm} className='event-list__button'>Create Event</button>
> 37 |                 {this.state.formOpen && < formClose={this.handleFormClose} EventForm/>}
     |                                                    ^
  38 | 
  39 |             </div>
  40 |         )

my parent component:

import React, { Component } from 'react'

export class eventList extends Component { constructor(props){ super(props) this.state={ formOpen:false } };

handleForm=()=>{
    this.setState({formOpen:true})
}
handleFormClose=()=>{
    this.setState({formOpen:false})
}

render() {
    return (
        <div className="event-list">       
        <button  onClick={this.handleForm} className='event-list__button'>Create Event</button>
            {this.state.formOpen && < formClose={this.handleFormClose} EventForm/>}

        </div>
    )
}

}

export default eventList

my child component

import React from 'react'

const eventForm =(props)=>{

    return (
        <div>
             <form  className="event__form"action="POST">
            <input name="hostName"type="text" placeholder="who is host?" required/>
            <input type="date" name="date" id="date" required/>
            <input type="text" name="address" placeholder="event address" required/>
            <input type="textArea" name="description" id="description" placeholder="description" required maxLength='60' rows='2'/>
            <div className='event__form__buttons'>
            <button type="submit">Submit</button>
            <button onClick={props.formClose} >Cancel</button>
            </div>

        </form>
        </div>
    )

}

export default eventForm

3
javascriptreactjs

3 Answers

1
votes

Thats because you are missing the Component name and having it at the end. you should be doing it this way:

 {this.state.formOpen && <EventForm formClose={this.handleFormClose} />}
1
votes

Thats a parsing error, it should be:

<EventForm formClose={this.handleFormClose} />
0
votes

You can't write a tag like this:

< formClose={this.handleFormClose} EventForm/>

Tags follow a strict format:

<TagName property1 property2 />
<TagName property1 property2 ></TagName>

Correct way of writing it:

<EventForm formClose={this.handleFormClose}/>