如何从React JS中的函数引用另一个类？

Question

I am relative new with JS so can someone please help me with the below problem in React JavaScript and explain how to do the followings?

I wish to create a program which either list all the available DB records (credit card items) or add new items to DB (newly registered cards).

I have created 3 JS classes, one for listing the already registered items, one for adding new ones, and the third one with 2 buttons where user can choose either to pay with an existing card or with a new one.

After clicking the button, unfortunately I don't know how to call the given classes (either ExistingCardList.js or NewCard.js ) to proceed.

I marked the affected classes with yellow: picture

I have written something like this:

export default class CreditCardForm extends React.Component {
  constructor (props) {
  super(props)

  this.handleExistingCard = this.handleExistingCard.bind(this)
  this.handleNewCard = this.handleNewCard.bind(this)
   }

  handleExistingCard()   {
  return(
    <ExistingCardList /> )
  }

  handleNewCard = () =>  {
  //return(
    <NewCard />
  }

render() {
    return (
      <div>
          <Form>
            <FormGroup>
              <Button style={{ margin: 50, marginLeft: 300, paddingLeft: 100, paddingRight: 100 }} onClick={this.handleExistingCard} >Pay with existing card</Button>
              <Button style={{ paddingLeft: 100, paddingRight: 100 }} onClick={this.props.handleNewCard}>Pay with a still not registered card</Button>
            </FormGroup>
          </Form>
      </div>
    )
}

Thanks a lot!

Answer 1

You can set one boolean state so within this state you can show your component.

export default class CreditCardForm extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      isNewCard: false
    }
    this.handleExistingCard = this.handleExistingCard.bind(this)
    this.handleNewCard = this.handleNewCard.bind(this)
  }

  handleExistingCard()   {
    this.setState({ isNewCard: false });
  }

  handleNewCard = () =>  {
    this.setState({ isNewCard: true })
  }


  render() {
    return (
      <div>
       <Button onClick={this.handleExistingCard} >Pay with existing card</Button>
       <Button onClick={this.handleNewCard}>Pay with a still not registered card</Button>
        <div>
          {this.state.isNewCard ?
            <NewCard />
            :
            <ExistingCardList />
          }
        </div>
      </div>
    )
  }
}

Hope this will help

Answer 2

Have you imported the referred classes in the current file?

import ExistingCardList from './ExistingCardList'
import NewCard from './NewCard'

Also do those classes have render() methods declared in them?

Answer 3

To display/hide a component after the user action you can do something like

import NewCard from './NewCard';
import ExistingCardList from './ExistingCardList';

Class Main extends React.Component{
    state = {
       option: false,
       card: false // this will be changing to existing/new use this value for anything else
    }

    selectCard(card){
       this.setState({card: card});
    }

    selectOption(option){
       this.setState({option: option})
    }

    render(){
        return (
            <div className="payment">
                <div className="options">
                     <ul>
                           <li onClick={this.selectOption.bind(this, 'card')}>Card</li>
                           <li onClick={this.selectOption.bind(this, 'paypal')}>PayPal</li>
                     </ul>
                </div>
                {this.state.option === 'card' && <div className="card-selector">
                     <div className="buttons">
                          <button onClick={this.selectCard.bind(this, 'existing')}>Pay with existing card</button>
                          <button onClick={this.selectCard.bind(this, 'new')}>Pay with a new card</button>
                     </div>
                     <div className="card">
                         {(this.state.card === 'new')? <NewCard /> : <ExistingCardList />;}
                     </div>
                </div>}
            </div>
        )
    }
} 

Let me know if you need any further info.