Conditional rendering based on user input

Question

I've just started learning React and am struggling with conditional rendering. I want to render components based on form input but i'm not sure what needs to be done or where it needs to be executed.

I have imported my Form component which has the input I want to use and have another component like this:

import React, {Component} from 'react';
import Form from './Form';
import CardOne from './CardOne';
import CardTwo from './CardTwo';
import CardThree from './CardThree';

export default class CardContainer extends Component {
  render(){
    return (
      <div>
        <CardOne />
        <CardTwo />
        <CardThree />
     </div>
    )
  }
}

I basically want to be able to show certain Cards if the value of the input is greater than X when the form is submitted, but I don't know how to target an imported component.

This is my Form component:

export default class Form extends Component {
  state = {
    number: ''
  };

  change = (e) => {
    this.setState({
      [e.target.name]: e.target.value
    });
  };

  onSubmit = e => {
    e.preventDefault();
    this.props.onSubmit(this.state);
    this.setState({
      number: ''
    })
  };

  render(){
    return (
      <form>
        <label>Number</label>
        <input
        type="number"
        name="number"
        placeholder="Number"
        value={this.state.number}
        onChange={e => this.change(e)} />

        <button onClick={e => this.onSubmit(e)}>Submit</button>
      </form>
    )
  }
}

Any help will be massively appreciated!

What i understood was , For example : If user Type 1 mean's u need to show one card component , if user types 2 mean's CardTwo component .. Correct me if i'm wrong. . depends upon the user input you will show Card component right ? ? — Beckham_Vinoth
– Beckham_Vinoth, Commented Jun 2, 2018 at 15:19
You have to incorporate your form somewhere, CardsContainer maybe. And besides that, the logic of filtering cards is not clear, as you can see from these comments. Can you add some more explanation? — seethrough
– seethrough, Commented Jun 2, 2018 at 15:20
Sorry if it was vague! What I mean is, if someone types in, for example, "10", cardOne shows. If they type in "20", cardsOne and cardTwo show. I hope that makes it a bit more clear! — Thomas Allen
– Thomas Allen, Commented Jun 2, 2018 at 15:22

Beckham_Vinoth · Accepted Answer · 2018-06-02 15:51:05Z

1

I have redesigned your Form component , Below is my code. . Let me know if u faced any issues on that .

import React, { Component } from 'react';
import CardOne from './CardOne';
import CardTwo from './CardTwo';
import CardThree from './CardThree';

export default class Form extends Component {
  state = {
    number: '',
    showOne:true,
    showTwo:false,
    showThree:false,
    userInputValue:''
  };

  change = (e) => {
    this.setState({
      userInputValue: e.target.value
    });
  };

  onSubmit = e => {
    e.preventDefault();
    this.props.onSubmit(this.state);
    if (this.state.userInputValue > 10 && this.state.userInputValue <20 ){
      this.setState({
        showTwo: true,
      })
    }
    if (this.state.userInputValue > 20 && this.state.userInputValue < 30) {
      this.setState({
        showThree: true,
      })
    }
  };

  render() {
    return (
      <div>
      <form>
        <label>Number</label>
        <input
          type="number"
          name="number"
          placeholder="Number"
          value={this.state.userInputValue}
          onChange={e => this.change(e)} />

        <button onClick={e => this.onSubmit(e)}>Submit</button>
      </form>
      <div>
      {this.state.showOne ? 
            <CardOne />
       :
       <div></div>
      }
      {this.state.showTwo ?
        <CardTwo />
        :
        <div></div>
      }
      {this.state.showThree ?
        <CardThree />
        :
        <div></div>
      }
      </div>
      </div>
    )
  }
}

// What i wrote above is your base functionality . You reedit the condition depends on ur requirement .

edited Jun 2, 2018 at 15:51

answered Jun 2, 2018 at 15:41

Beckham_Vinoth

7213 gold badges14 silver badges40 bronze badges

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

3 Comments

Thomas Allen Over a year ago

Thanks, really appreciate it! I just tried it and it's not letting me enter a number into the input...

Beckham_Vinoth Over a year ago

pls change this line --> value={this.state.number} to --- value={this.state.userInputValue}

Thomas Allen Over a year ago

Really appreicate it! That's the base functionality I was looking for! Thanks

seethrough · Accepted Answer · 2018-06-02 16:22:36Z

0

This is what I came up with following your logic of card rendering. I did not change Form coponent but rather worked on the Container

export default class CardContainer extends Component {
   constructor(props) {
    super(props);
    state = {
       number: 0,
    }
    this.onFormSubmit = this.onFormSubmit.bind(this);
  }
   onFormSubmit=(number)=>{
     this.setState({ number: number });
   }
  
  render(){
    let i=Math.floor(this.state.number/10) 
    return (
      <div>
        <Form onSubmit={() => this.onFormSubmit(number)}
        [<CardOne />, <CardTwo />, <CardThree/>].slice(0,i).map(card => 
            {card} 
        )
     </div>
    )
  }
}

edited Jun 2, 2018 at 16:22

answered Jun 2, 2018 at 15:46

seethrough

7524 silver badges15 bronze badges

Comments

basifat · Accepted Answer · 2018-06-02 16:46:27Z

0

I would use render prop for this kind of problem. You can research more about render props but basically your CardContainer component will not render those cards component statically as it is. It will return props.children instead.

And then you will have a function (i.e function TestX) that will have a conditional to check what the value of X is. This is the function that will return either , , based on what X is. The function TestX will receive props from CardContainer, including the value of X that is read from the state.

So I will just use CardContainer component with as its child.

answered Jun 2, 2018 at 16:46

basifat

194 bronze badges

1 Comment

Thomas Allen Over a year ago

Thanks for this! I'm still in very early days with learning React so will definitely look into how to render props!

Collectives™ on Stack Overflow

Conditional rendering based on user input

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related