I have a form that I want to render on the condition that the props are loaded. And so I have this code
const styles = theme => ({
root: {
fontFamily: `"Alef", sans-serif`,
},
});
class CreatePartner extends Component {
state = {
location: (this.props &&this.props.partner && this.props.partner[0]) ? this.props.partner[0].location : '',
parking: (this.props &&this.props.partner &&this.props.partner[0] !== null) ? this.props.partner[0].parking : false,
smokingTolerance: (this.props &&this.props.partner &&this.props.partner[0] !== null) ? this.props.partner[0].smokingTolerance : false,
petTolerance: (this.props &&this.props.partner &&this.props.partner[0] !== null) ? this.props.partner[0].petTolerance : false,
unisex: (this.props &&this.props.partner &&this.props.partner[0] !== null) ? this.props.partner[0].unisex : null,
age: (this.props &&this.props.partner &&this.props.partner[0] !== null) ? this.props.partner[0].age : null,
zone: (this.props &&this.props.partner &&this.props.partner[0] !== null) ? this.props.partner[0].zone : null,
sex: (this.props &&this.props.partner &&this.props.partner[0] !== null) ? this.props.partner[0].sex : null,
relationship_status: (this.props &&this.props.partner &&this.props.partner[0] !== null) ? this.props.partner[0].relationship_status : null,
religious: (this.props &&this.props.partner &&this.props.partner[0] !== null) ? this.props.partner[0].religious : null,
religion: (this.props &&this.props.partner &&this.props.partner[0] !== null) ? this.props.partner[0].religion : null,
living: (this.props &&this.props.partner &&this.props.partner[0] !== null) ? this.props.partner[0].living : null,
budget: (this.props &&this.props.partner &&this.props.partner[0] !== null) ? this.props.partner[0].budget : null,
prev1: (this.props &&this.props.partner &&this.props.partner[0] !== null) ? this.props.partner[0].prev1 : null,
prev2: (this.props &&this.props.partner &&this.props.partner[0] !== null) ? this.props.partner[0].prev2 : null,
friend_firstName: (this.props &&this.props.partner &&this.props.partner[0] !== null) ? this.props.partner[0].friend_firstName : '',
friend_lastName: (this.props &&this.props.partner &&this.props.partner[0] !== null) ? this.props.partner[0].friend_lastName : '',
friend_phoneNumber: (this.props &&this.props.partner &&this.props.partner[0] !== null) ? this.props.partner[0].friend_phoneNumber : '',
aboutMe: (this.props &&this.props.partner &&this.props.partner[0] !== null) ? this.props.partner[0].aboutMe : '',
freecontent: (this.props &&this.props.partner &&this.props.partner[0] !== null) ? this.props.partner[0].freecontent : '',
timestamp: (this.props &&this.props.partner &&this.props.partner[0] !== null) ? this.props.partner[0].timestamp : '',
code: (this.props &&this.props.partner &&this.props.partner[0] !== null) ? this.props.partner[0].code : '',
};
componentDidMount() {
window.$('select').formSelect();
}
validateSection1() {
if (this.state.location == '' || this.state.location == null) return false;
return true;
};
validateSection2() {
if (!this.validateSection1()) {
return false;
}
if (this.state.sex == '' || this.state.sex == null) return false;
if (this.state.unisex == '' || this.state.unisex == null) return false;
if (this.state.zone == '' || this.state.zone == null) return false;
if (this.state.relationship_status == '' || this.state.relationship_status == null) return false;
if (this.state.age == '' || this.state.age == null) return false;
if (this.state.religious == '' || this.state.religious == null) return false;
// if (this.state.isSmoker == 0 && this.state.smokingTolerance == 0 && this.state.petTolerance == 0) return false;
return true;
};
validateSection3() {
if (!this.validateSection2()) {
return false;
}
if (this.state.living == null || this.state.living == '') return false;
if (this.state.aboutMe == null || this.state.aboutMe == '') return false;
return true;
};
validateSection4() {
if (!this.validateSection3()) {
return false;
}
if (this.state.prev1 == null || this.state.prev1 == '') return false;
if (this.state.prev2 == null || this.state.prev2 == '') return false;
return true;
};
validateSection5() {
if (!this.validateSection4()) {
return false;
}
if (this.state.budget == null || this.state.budget == '') return false;
return true;
};
handleChange = (e) => {
this.setState({
[e.target.id]: e.target.value
});
};
handleSelectChange = (e) => {
this.setState({
[e.target.id]: e.target.value,
});
};
handleSubmit = (e) => {
e.preventDefault();
this.props.createPartner(this.state)
this.props.history.push('/dashboard')
};
toggleisSmoker = () => {
this.setState(prevState => ({
isSmoker: !prevState.isSmoker,
}));
}
togglepetTolerance = () => {
this.setState(prevState => ({
petTolerance: !prevState.petTolerance,
}));
}
togglesmokingTolerance = () => {
this.setState(prevState => ({
smokingTolerance: !prevState.smokingTolerance,
}));
}
render() {
const {classes} = this.props;
const {
location,
isSmoker,
smokingTolerance,
petTolerance,
unisex,
age,
zone,
sex,
relationship_status,
religious,
religion,
living,
budget,
prev1,
prev2,
friend_firstName,
friend_lastName,
friend_phoneNumber,
aboutMe,
freecontent,
checked
} = this.state;
const zoneOptions = [
{label: "אזור הצפון וחיפה", value: 0, type: "zone"},
{label: "אזור המרכז ות״א", value: 1, type: "zone"},
{label: "אזור ירושליים", value: 2, type: "zone"},
{label: "אזור דרום", value: 3, type: "zone"}
];
const sexOptions = [
{label: "opt1", value: 0, type: "sex"},
{label: "opt2", value: 1, type: "sex"},
{label: "opt3", value: 2, type: "sex"}
];
const unisexOptions = [
{label: "opt1", value: 0, type: "unisex"},
{label: "opt2 ", value: 1, type: "unisex"},
];
const ageOptions = [
{label: "18-23", value: 0, type: "age"},
{label: "24-28", value: 1, type: "age"},
{label: "29-34", value: 2, type: "age"},
{label: "35-44", value: 3, type: "age"},
{label: "45-54", value: 4, type: "age"},
{label: "55+", value: 5, type: "age"}
];
const relationship_statusOptions = [
{label: "רווק/ה", value: 0, type: "relationship_status"},
{label: "במערכת יחסים", value: 1, type: "relationship_status"},
{label: "נשוי/אה", value: 2, type: "relationship_status"},
];
const religiousOptions = [
{label: "שומר מצוות", value: 0, type: "religious"},
{label: "מסורתי", value: 1, type: "religious"},
{label: "חילוני", value: 2, type: "religious"},
{label: "לא משנה", value: 3, type: "religious"}
];
const religionOptions = [
{label: "יהודי/יה", value: 0, type: "religion"},
{label: "מוסלמי/ת", value: 1, type: "religion"},
{label: "נוצרי/ת", value: 2, type: "religion"},
{label: "דרוזי/ית", value: 3, type: "religion"},
{label: "לא משנה", value: 4, type: "religion"}
];
const livingOptions = [
{label: "opt1", value: 0, type: "living"},
{label: "opt2", value: 1, type: "living"},
{label: "opt3", value: 2, type: "living"},
{label: "Opt4", value: 3, type: "living"}
];
const prevOptions = [
{label: "opt 1", value: 0, type: "prev"},
{label: "opt2", value: 1, type: "prev"},
{label: "opt3", value: 2, type: "prev"},
{label: "3", value: 3, type: "prev"}
];
const budgetOptions = [
{label: "עד 1500", value: 0, type: "budget"},
{label: "עד 1800", value: 1, type: "budget"},
{label: "עד 2100", value: 2, type: "budget"},
{label: "עד 2400", value: 3, type: "budget"},
{label: "עד 2700", value: 4, type: "budget"},
{label: "עד 3000", value: 5, type: "budget"},
{label: "3000+", value: 6, type: "budget"}
];
return (
<div className={classes.root}>
<Navbar/>
<div>
{this.props&&this.props.partner&&this.props.partner[0]?
<div className="container">
<div className="section center-align mb-3">
<h4 className="">שותפים</h4>
<h6>*פרטים אלה לא יפורסמו בפורום ציבורי/לוח מודעות</h6>
</div>
<form onSubmit={this.handleSubmit} noValidate>
<div className="section center-align">
<h5 className="sec-heading mt-0">נא לבחור את המוסד הקרוב לנכס</h5>
<div className="row">
<div className="input-field col s4">
<div className="img-div">
<img src={tau} alt="תל אביב" height="100px"/>
</div>
<p className="center">
<label>
<input className="with-gap" name="group1" id="location" value="0"
type="radio"
checked={location === "0"}
onChange={this.handleChange} required/>
<span>תל אביב</span>
</label>
</p>
</div>
<div className="input-field col s4">
<div className="img-div">
<img src={jerusalim} alt=" ירושליים (בקרוב)" height="100px" width="140px"/>
</div>
<p className="center">
<label>
<input className="with-gap" name="group1" id="location"
value="Jerusalim"
type="radio"
disabled="disabled" onChange={this.handleChange}/>
<span> ירושליים (בקרוב)</span>
</label>
</p>
</div>
<div className="input-field col s4">
<div className="img-div">
<img src={technion} alt="חיפה" height="100px"/>
</div>
<p className="center">
<label>
<input className="with-gap" name="group1" id="location" value="1"
type="radio" checked={location === "1"}
onChange={this.handleChange} required/>
<span>חיפה</span>
</label>
</p>
</div>
</div>
</div>
<div>
<div className={this.validateSection1() ? 'show' : 'hide'}>
<div className="divider"></div>
<div className="section">
<div className="center-align">
<h5 className="sec-heading">פרטים אישיים</h5>
<div className="row">
{console.log(this.props)}
<div className="input-field col s6 m3">
<select id="sex" onChange={this.handleSelectChange} required>
<option value={sex} disabled selected>מין</option>
{sexOptions.map(function (option) {
return <option key={option.value} value={option.value}>{option.label}</option>
})}
</select>
<label>מין</label>
</div>
<div className="input-field col s6 m3">
<select id="unisex" onChange={this.handleSelectChange} required>
<option value={unisex} disabled selected>אנא בחר?</option>
{unisexOptions.map(function (option) {
return <option key={option.value} value={option.value}>{option.label}</option>
})}
</select>
<label>אנא בחר?</label>
</div>
<div className="input-field col s6 m3">
<select id="zone" onChange={this.handleSelectChange} required>
<option value={zone} disabled selected>מאיפה אתם?</option>
{zoneOptions.map(function (option) {
return <option key={option.value} value={option.value}>{option.label}</option>
})}
</select>
<label>מאיפה אתם?</label>
</div>
<div className="input-field col s6 m3">
<select id="relationship_status" onChange={this.handleSelectChange}
required>
<option value={relationship_status} disabled selected>מצב משפחתי</option>
{relationship_statusOptions.map(function (option) {
return <option key={option.value} value={option.value}>{option.label}</option>
})}
</select>
<label>מצב משפחתי</label>
</div>
</div>
<div className="row">
<div className="input-field col s6 m4">
<select id="age" onChange={this.handleSelectChange} required>
<option value={age} disabled selected>גיל</option>
{ageOptions.map(function (option) {
return <option key={option.value} value={option.value}>{option.label}</option>
})}
</select>
<label>גיל</label>
</div>
<div className="input-field col s6 m4">
<select id="religious" onChange={this.handleSelectChange} required>
<option value={religious} disabled selected>סטטוס דתי</option>
{religiousOptions.map(function (option) {
return <option key={option.value} value={option.value}>{option.label}</option>
})}
</select>
<label>סטטוס דתי</label>
</div>
<div className="input-field col s6 m4">
<select id="religion" onChange={this.handleSelectChange} required>
<option value={religion} disabled selected>דת</option>
{religionOptions.map(function (option) {
return <option key={option.value} value={option.value}>{option.label}</option>
})}
</select>
<label>דת</label>
</div>
</div>
<div className="row">
<div className="input-field col s4">
<p>
<label>
<input id="isSmoker" type="checkbox"
checked={isSmoker}
onChange={this.toggleisSmoker}/>
<span>TITLE</span>
</label>
</p>
</div>
<div className="input-field col s4">
<p>
<label>
<input id="smokingTolerance" type="checkbox"
checked={smokingTolerance}
onChange={this.togglesmokingTolerance}/>
<span>TITLE</span>
</label>
</p>
</div>
<div className="input-field col s4">
<p>
<label>
<input id="petTolerance" type="checkbox"
checked={petTolerance}
onChange={this.togglepetTolerance}/>
<span>TITLE</span>
</label>
</p>
</div>
</div>
</div>
</div>
</div>
<div className={this.validateSection5() ? 'show' : 'hide'}>
<div className="divider"></div>
<div className='section'>
<div className="p-2">
<div className="center-align">
<h5 className="sec-heading">נרשם עם חבר/ה</h5>
<div className="row">
<div className="col s6 m4">
<div className="input-field">
<input id="friend_firstName" type="text"
className="validate"
value={friend_firstName}
onChange={this.handleChange}/>
<label htmlFor="friend_firstName"> שם פרטי של חבר/ה</label>
</div>
</div>
<div className="col s6 m4">
<div className="input-field">
<input id="friend_lastName" type="text" className="validate"
value={friend_lastName}
onChange={this.handleChange}/>
<label htmlFor="friend_lastName">שם משפחה של חבר/ה</label>
</div>
</div>
<div className="col s6 m4">
<div className="input-field">
<input id="friend_phoneNumber" type="text"
className="validate"
value={friend_phoneNumber}
onChange={this.handleChange}/>
<label htmlFor="friend_phoneNumber">טלפון של חבר/ה</label>
</div>
</div>
</div>
</div>
</div>
</div>
<div className='section'>
<div className="center-align">
<h5 className="sec-heading red-text">טקסט חופשי</h5>
<div className="row">
<div className="col s12">
<div className="input-field">
<textarea id="freecontent" className="materialize-textarea" value={freecontent}
onChange={this.handleChange}></textarea>
<label htmlFor="freecontent">טקסט חופשי</label>
</div>
</div>
</div>
</div>
</div>
<div className="divider"></div>
<div className='center-align '>
<div className="section">
<Button type="submit" color="primary" size="lg">סיום</Button>
</div>
</div>
</div>
</div>
</form>
</div>
: <div></div>}
</div>
</div>
)
}
}
When the props are ready, this is what is rendered. Instead of dropdowns, I get only the labels.
And this is what its supposed to look like
If anyone has any idea as to why this is happening, I'd highly highly appreciate some advice. I've looked everywhere, it seems like someone has had this issue in the past on stack but no one answered their thread. Please keep in mind that this is only happening with the select fields. Regular text fields are appearing normally. Note: had to cut part of the code as per SO's character limit. There are a few more drop downs and text fields.
