react，如何实现选中某个值后显示指定项，没有选中某个值则不显示指定项？

Question

react版本如下：

已写的部分代码：

import React, { useState } from 'react'
import {
  List,
  Form,
  Input,
  Picker,
  ImageUploader,
  TextArea,
  Modal,
  Toast,
  Button
} from 'antd-mobile'

const roomTypeData = [
      { label: '三室', value: 'ROOM|20903a' },
      { label: '四室', value: 'ROOM|ce2a5d' }
]

const RentAdd = () => {
    const [huxingvisible, setHuxingVisible] = useState(false)
    // 加分
    const [price,setPrice] = useState('')
    // 户型
    const [roomType,setRoomType] = useState('')

    function Huxing() {
    return (
        <Picker
          title='户&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;型'
          columns={[roomTypeData]}
          visible={huxingvisible}
          mouseWheel={true}
          popupClassName={styles.huxing}
          onClose={() => {setHuxingVisible(false)}}
          onConfirm={(v = []) => {
            let item = roomTypeData.find(r => r.value === v[0]) || {}
            setRoomType(item.value)
          }}
        />
    )
  }

//...

    return (
          <Form>
                 <Form.Item
                        label='户&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;型'
                        extra={roomType.length ? roomTypeData.filter(item=>item.value===roomType)[0].label : '请选择'}
                        arrow={true}
                        onClick={() => {
                            setHuxingVisible(true)
                        }}
                 >
                       {Huxing()}
                  </Form.Item>

                  {/* 如果户型的选中值为四室，则显示加分项，否则不显示加分项 */}
                  {roomTypeData.map(item => item.label == '四室' ? <Form.Item key={item.label} label='加&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;分' name='zujin' extra="积分"}>
                        <Input
                            placeholder="请输入大于零的整数"
                            style={{'--font-size': '14.0625px','--placeholder-color': '#999999'}}
                            value={price}
                            clearable
                            maxLength={11}
                            onChange={val => {setPrice(val)}}
                         />
                    </Form.Item> : '' )}
          </Form>
    )
}

希望实现如下效果，如果户型的选中值为四室，则显示加分项，否则不显示加分项：

目前效果如下，无论户型的选中值为三室或四室，加分项一直显示着

请问代码出了什么问题？如何修改？恳请在现有代码基础上展示说明，谢谢。

Answer 1

前面加个 && 运算符

{
roomType==='ROOM|ce2a5d'&&roomTypeData.map(item => item.label == '四室' ? <Form.Item key={item.label} label='加&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;分' name='zujin' extra="积分"}>
                        <Input
                            placeholder="请输入大于零的整数"
                            style={{'--font-size': '14.0625px','--placeholder-color': '#999999'}}
                            value={price}
                            clearable
                            maxLength={11}
                            onChange={val => {setPrice(val)}}
                         />
                    </Form.Item> : '' )}