I'm trying to create truthness check in my component to render other components but it is giving me unreachable code error
I dont know how to fix it or where to start
Please help me to solve this issue,
Thanks in advance
return (
checkCommentAuthor() ? (
<IsCommentAuthor/>
) : (
<IsNotCommentAuthor/>
) :
After this everything is unreachable
(
<div id="card" className="card">
<div id="postButtons" className="buttons">
<button onClick={() => history.push("/homepage")}>Home</button>
<button onClick={() => history.push("/profile")}>My Profile</button>
<button onClick={() => LogOut()}>Log Out</button>
</div>
<div className="posts">
<p>
Author :
{grabUsernameFromLocation()}
</p>
<p>
Title :
{grabTitleFromLocation()}
</p>
<p>
Description :
{grabDescriptionFromLocation()}
</p>
<div>
<ul>
{
comments.map((items: any) => {
return (
<p
key={uuidv4()}
>Comment :
{items.comment}
</p>
);
})}
</ul>
</div>
<div className="comments">
<input ref={commentRef} placeholder={'Write Comment'}/>
<button onClick={() => {
addComment(grabIdFromLocation())
}}>Add Comment
</button>
</div>
</div>
</div>
)
)
}
Related
I am working on a quiz app and currently, I have just a button as my option but I want to choose radio buttons as my options and I also want to have a submit feature.
This is my code:
<>
{showScore ? null : <div>Countdown: {counter}</div>}
<div className="question_no">
<span>Question {currentQuestion + 2}</span>/{questions.length}
</div>
<div className="quiz-container">
{showScore ? (
<div className="score">
You scored {score} out of {questions.length}
</div>
) : (
<>
<div className="quiz-header">
<div className="question">
{questions[currentQuestion].questionText}
</div>
</div>
<div className="answer_div">
{questions[currentQuestion].answerOptions.map(
(answerOption) => (
<button
onClick={() =>
handleAnswerOptionClick(
answerOption.isCorrect
)
}
>
{answerOption.answerText}
</button>
)
)}
</div>
</>
)}
</div>
</>
how can i change the button option to radio button
Radio is not a button type, but an input type, so probably something like this:
<div className="answer_div">
{questions[currentQuestion].answerOptions.map(
(answerOption) => (
<input type="radio" id={answerOption.answerID}
onClick={() =>
handleAnswerOptionClick(
answerOption.isCorrect
)
}
/>
<label htmlFor={answerOption.answerID}>
{answerOption.answerText}
</label>
)
)}
</div>
Maybe you wanna also use onChange instead of onClick.
i have this input filed in my code for serching the list i have 3 catagery of list which are displayed by three map() i want to input a name in the input fild and if it exist i want to show the firstname just like whatsapps serach works
<form style={{ display: "flex" }}>
<input
className="w-100 msserserch gradiantblur"
placeholder="seach messages"
onChange={(e) =>
this.setState({ serchinput: e.target.value })
}
type="Search"
/>
</form>
the map() are given below there are 3 i want when i type in input fild fistname mustbe filterd from this
{this.state.tablist == "doctor" ? (
<div
className="chat-avatar gradiantblur"
onClick={() => this.livechat(this.state.list.id)}
>
<div></div>
<div className="alignstart">
{this.state.list.firstname} {this.state.list.lastname}
<p className="margin-0">
{" "}
{this.state.list.speciality}
</p>
<p className="margin-0">
✓ {this.state.list.speciality}
</p>
</div>
<div>152:11</div>
</div>
) : this.state.tablist == "consultant" ? (
<>
<div className="scrollerchatlist">
{console.log(this.state.consulatnt)}
{this.state.consulatnt.map((data) => (
<div
className="chat-avatar gradiantblur"
onClick={() => this.livechat(data.id)}
>
<div>
</div>
<div className="alignstart">
{data.firstname} {data.lastname}
<p className="margin-0"> {data.speciality}</p>
<p className="margin-0">
✓ {data.firstname}
</p>
</div>
<div>152:11</div>
</div>
))}
</div>
</>
) : this.state.tablist == "sales" ? (
<>
<div className="scrollerchatlist">
{this.state.sales.map((data) => (
<div
className="chat-avatar gradiantblur"
onClick={() => this.livechat(data.id)}
>
<div>
</div>
<div className="alignstart">
{data.firstname}
<p className="margin-0">
</p>
</div>
<div>152:11</div>
</div>
))}
</div>
</>
) : null}
my code is big so i put it in codesandbox
https://codesandbox.io/s/intelligent-nova-v7pb1?file=/src/App.js
I see in your code, you have this.state.tablist which is deciding what to render when any tab gets selected. So whenever user types in the input, you can just filter out firstname string from all three array and render them in your list:
onChange={this.onSearchTextChange}
onSearchTextChange(event) {
const query = event.query.target;
if(query){
const dataSet = [this.state.sales, this.state.consultants, ...];
const filteredName = dataSet.map(
data => data.filter(row => row.firstName).filter(Boolean)
).flat();
// now set the state with this data
this.setState({...});
}
}
So basically I got 3 plans, but I want to be able to only select 1 at the time. But when I do click on 1 all 3 are selected. I output the plans from map, tried using index of each plan, but didn't work.
const [selectedPlan, setSelectedPlan] = useState(false);
const handleSelectPlan = () => {
setSelectedPlan((prevSelectedPlan) => !prevSelectedPlan);
};
`
{data.plans.map((each) => (
<div className={styles.pricingPlans__each} key={each.id}>
<div className={styles.header}>
<h3>{each.header}</h3>
</div>
<div className={styles.price}>
<h4>£{each.price}/mo.</h4>
</div>
<div className={styles.body}>{each.body}</div>
<div className={styles.cta}>
<button onClick={() => handleSelectPlan(each.id)}>
{selectedPlan ? <FaCheck /> : null} Select
</button>
</div>
</div>
))}
You need to check for the correct selected plan not just if one is selected:
{data.plans.map((each) => (
<div className={styles.pricingPlans__each} key={each.id}>
<div className={styles.header}>
<h3>{each.header}</h3>
</div>
<div className={styles.price}>
<h4>£{each.price}/mo.</h4>
</div>
<div className={styles.body}>{each.body}</div>
<div className={styles.cta}>
<button onClick={() => handleSelectPlan(each.id)}>
{selectedPlan === each.id ? <FaCheck /> : null} Select
</button>
</div>
</div>
))}
selectedPlan ?: will only check for any plan, since a strings is truthy and will result in Facheck to be rendered for all.
here is my reactjs button code how can hide while clicking in button
<div className='chat-bubble animated bounceInLeft' style={{display:'none'}}>
<div><img src={giabot} alt="" className="round"/></div>
<div className="chat-content"> {chatData.text[3]}<br/>
<div className="btn-group">
{
chatData.values.map((obj, index) => {
return (
<button className='button' onClick={this.buttonSubmit} key={index} value={obj}>{obj}</button>
)
})
}
</div>
</div>
</div>
you can do someting like this, at first set showButton field true and onClick make it false
buttonSubmit = ()=> {
this.setState({ showButton: false });
},
<div className='chat-bubble animated bounceInLeft' style={{display:'none'}}>
<div><img src={giabot} alt="" className="round"/></div>
<div className="chat-content"> {chatData.text[3]}<br/>
<div className="btn-group">
{
chatData.values.map((obj, index) => {
return (
{showButton && (
<button className='button' onClick={this.buttonSubmit} key={index} value={obj}>{obj}</button>
)}
)
})
}
</div>
</div>
</div>
buttonSubmit = ()=> {
this.setState({ showButton: !this.state.showButton });
},
<div className='chat-bubble animated bounceInLeft' style={{display:'none'}}>
<div><img src={giabot} alt="" className="round"/></div>
<div className="chat-content"> {chatData.text[3]}<br/>
<div className="btn-group">
{
chatData.values.map((obj, index) => {
return (
{showButton && (
<button className='button' onClick={this.buttonSubmit} key={index} value={obj}>{obj}</button>
)}
)
})
}
</div>
</div>
</div>
A small change to the above answer. You can enable and disable it onclick
So i'm new to reactjs, im doing a table that when you click on 1 row it will render a detail description for that row. I have some button to trigger some event on that description table. But when i'm click the row on the table the description still render but the problem is, all the event in the descroption is trigger when i click on the row table not the button. Help pls
Here is my code:
const [displayCoursesDescription, setDisplayCoursesDescription] = useState({ coursesDescription: [] });
const handleCloseCoursesDescription = () => setDisplayCoursesDescription({ coursesDescription: [] });
const handleReloadCourse = () => {
setDisplayCoursesDescription({ coursesDescription: [] });
dispatchStudentCourses();
};
<div className="studentDashboardContent">
<div className="TableHeader">
<img className="courseIcon" src={courseActive} alt="courseActive" role="presentation" />
<p className="courseText">Courses</p>
<div className="ToolBar">
<OutlinedButton
icon={<ReloadOutlined style={{ width: '32px' }} />}
color={COLOR}
backgroundColor={BACKGROUND_COLOR}
display="inline"
onClick={handleReloadCourse}
/>
<SearchBox
placeholder="Search for courses"
color={COLOR}
backgroundColor={BACKGROUND_COLOR}
display="inline" // inline || none
/>
</div>
</div>
{courses && courses.status === API_STATUS.LOADING ? (
<LoadingIndicator />
) : (
<Table
className="studentTable"
columns={columns}
dataSource={coursesSource}
pagination={{ hideOnSinglePage: true }}
onRow={(record) => ({
onClick: (event) => {
setDisplayCoursesDescription({ coursesDescription: record });
getDepartmentById(record.department);
},
})}
/>
)}
</div>
{displayCoursesDescription.coursesDescription.key ? (
<div className="CourseDescription">
<div className="HeaderButton">
<a
href={displayCoursesDescription.coursesDescription.hostname}
className="courseUrl"
rel="noreferrer"
target="_blank"
>
<div className="forwardBtn" role="presentation">
<p className="forwardText">Go to course</p>
<img className="forwardImg" src={forward} alt="forward" />
</div>
</a>
<Button className="closeBtn" type="primary" icon={<CloseOutlined />} onClick={console.log('click1')} />
</div>
<div className="courseCodeName">
<p className="courseCode">{displayCoursesDescription.coursesDescription.code}</p>
<p className="courseName">{displayCoursesDescription.coursesDescription.name}</p>
</div>
<p className="departmentTitle">DEPARTMENT</p>
<div className="courseDepartment">
<img className="departmentImg" src={departmentIcon} alt="department" />
<p className="departmentName">{departments.name}</p>
</div>
<div className="courseDescription">
<p className="descriptionTitle">COURSE DESCRIPTION</p>
<p className="description">{displayCoursesDescription.coursesDescription.description}</p>
</div>
<Button className="unassignCourse" type="primary" danger onClick={console.log('click2')}>
Exit course <LoginOutlined />
</Button>
</div>
) : (
<div className="studentBackground">
<div className="dashboardContainer">
<p className="hiText">Hi {user.name}. How are you today?</p>
<img className="dashboardIMG" src={dashboardIMG} alt="dashboardimg" />
</div>
</div>
)}
Here is the console log that 2 onClick event were trigger when i click on the table Row
enter image description here