CODEWITHSUNDEEP
javascriptreactjs
Raul Sanchez
Raul Sanchez

Reputation: 2019

How to pass props without rendering the component?

I have two components one called ReturningCustomer and the other one called Update. I have a phone number saved in state in ReturningCustomer and I want to pass that phone number to the Update component with having to render Update or use Redux:

render() {
       return (
        <div className="row returning-customer">
            <h3>Returning Customer</h3>
            <div className="col">
                <p className="error">{this.state.error}</p>
                <form className="row" onSubmit={this.onSubmit}>
                    <label>Phone Number</label>
                    <input 
                        type="text"
                        className="validate"
                        onChange={this.onPhoneNumberChange}
                    />
                    <button className="btn">Go</button>
                </form>
            </div>
            <Update 
                phoneNumber={this.state.phoneNumber} 
            />
        </div>
    );

}

Upvotes: 6

Views: 12363

Answers (2)

jabacchetta
jabacchetta

Reputation: 50308

It's not entirely clear what you're asking based on the current description, but it sounds like you're either wanting to conditionally render a component while passing props, or you want to know how to use those props? I'm including both here.

Conditionally rendering a component and passing props:

// SomeComponent.js

import React from 'react'
import Update from '../..'

class SomeComponent extends React.Component {
  state = { phoneNumber: '' };

  renderUpdate() {
    const someCondition = true;

    if (someCondition) {
      return <Update phoneNumber={this.state.phoneNumber} />
    }

    return null
  }

  render() {
    return (
      <div>
        {this.renderUpdate()}
      </div>
    )
  }
}

export default SomeComponent

Using props:

// Update.js

import React from 'react'

// destructuring the props object here
const Update = ({ phoneNumber }) => (
   <div>
     <p>{phoneNumber}</p>
   </div>
)

export default Update

Upvotes: 2

mu_sa
mu_sa

Reputation: 2735

In the render function for Update you could use either one of the following and the component would not render

render() { 
   return false; 
}

render() { 
   return null; 
}

render() { 
   return []; 
}

render() { 
   return <></>; 
}

Upvotes: 1

Related Questions