We Keep Coding

How to toggle between components in vue.js?

I developed one page called Dashboard.vue and this page contains three child components(Display,sortBooksLowtoHigh,sortBooksHightoLow). Dashboard component contains one select options also inside that it have two options "Price:High to Low and Price:Low to High ",
if i click on price:LowToHigh option then it hides the Display component and displays the sortBooksLowtoHigh component utpo this it's working fine,
Now i import one more component called sortBooksHightoLow when i click on "price:High to Low" option it should hides the DisplayComponent and displays the sortBooksHightoLow component.How to acheive this thing please help me
Dashboard.vue
<template>
<div class="main">
<div class="navbar navbar-default navbar-fixed-top">
<div class="navbar-header">
<img src="../assets/education.png" alt="notFound" class="education-image" />
</div>
<ul class="nav navbar-nav">
<li>
<p class="brand">Bookstore</p>
</li>
</ul>
<div class="input-group">
<i #click="handlesubmit();" class="fas fa-search"></i>
<div class="form-outline">
<input type="search" v-model="name" class="form-control" placeholder='search...' />
</div>
</div>
<ul class="nav navbar-nav navbar-right" id="right-bar">
<li><a> <i class="far fa-user"></i></a></li>
<p class="profile-content">profile</p>
<li><a><i class="fas fa-cart-plus"></i></a></li>
<p class="cart-content">cart</p>
</ul>
</div>
<div class="mid-body">
<h6>Books<span class="items">(128items)</span></h6>
<select class="options" #change="applyOption">
<option disabled value="">Sort by relevance</option>
<option value="HighToLow">price:High to Low</option>
<option value="LowToHigh">price:Low to High</option>
</select>
</div>
<DisplayBooks v-show="flag==='noOrder'" />
<sortBooksLowtoHigh v-show="flag==='lowToHigh'" />
<sortBooksHightoLow v-show="flag==='highToLow'" />
</div>
</template>
<script>
import service from '../service/User'
import sortBooksLowtoHigh from './sortBooksLowtoHigh.vue'
import sortBooksHightoLow from './sortBooksHightoLow.vue'
import DisplayBooks from './DisplayBooks.vue'
export default {
components: {
DisplayBooks,
sortBooksLowtoHigh,
sortBooksHightoLow
},
data() {
return {
flag: 'noOrder',
brand: 'Bookstore',
name: '',
visible:true,
books: [{
}]
}
},
methods: {
flip() {
this.flag = !this.flag;
},
applyOption(evt) {
if (evt.target.value === "HighToLow") this.flag = 'highToLow';
else this.flag = 'lowToHigh';
},
}
}
</script>
<style lang="scss" scoped>
#import "#/styles/Dashboard.scss";
</style>
sortBooksHightoLow.vue
<template>
<div class="carddisplay-section">
<div v-for="book in books" :key="book.id" class="card book">
<div class="image-section">
<div class="image-container">
<img v-bind:src="book.file" />
</div>
</div>
<div class="title-section">
{{book.name}}
</div>
<div class="author-section">
by {{book.author}}
</div>
<div class="price-section">
Rs. {{book.price}}<label class="default">(2000)</label>
<button v-if="flag" class="btn-grp" type="submit" #click="handlesubmit();Togglebtn();">close</button>
</div>
<div class="buttons">
<div class="button-groups">
<button type="button" #click="toggle(book.id);flip(book.id);" v-if="state==true" class="AddBag">Add to Bag</button>
<button v-if="state==true" class="wishlist">wishlist</button>
</div>
<div v-if="state==false" class="AddedBag">
<button class="big-btn">Added to Bag</button>
</div>
</div>
</div>
</div>
</template>
<script>
import service from '../service/User'
export default {
data() {
return {
result: 0,
authorPrefix: 'by',
pricePrefix: 'Rs.',
defaultStrikePrice: '(2000)',
buttonValue: 'close',
flag: true,
state: true,
clickedCard: '',
books: [{
id: 0,
file: 'https://images-na.ssl-images-amazon.com/images/I/41MdP5Tn0wL._SX258_BO1,204,203,200_.jpg',
name: 'High to Low',
author: 'Saioii',
price: '1500'
}, ]
}
},
methods: {
toggle(id) {
this.clickedCard = id;
// this.card.content = this.notes.filter((note) => note.id === id);
console.log(this.clickedCard);
},
flip() {
this.state = !this.state;
},
Togglebtn() {
this.flag = !this.flag;
},
handlesubmit() {
service.userDisplayBooksHightoLow().then(response => {
this.books.push(...response.data);
})
},
}
}
</script>
<style lang="scss" scoped>
#import "#/styles/DisplayBooks.scss";
</style>
sortBooksLowtoHigh.vue
<template>
<div class="carddisplay-section">
<div v-for="book in books" :key="book.id" class="card book">
<div class="image-section">
<div class="image-container">
<img v-bind:src="book.file" />
</div>
</div>
<div class="title-section">
{{book.name}}
</div>
<div class="author-section">
by {{book.author}}
</div>
<div class="price-section">
Rs. {{book.price}}<label class="default">(2000)</label>
<button v-if="flag" class="btn-grp" type="submit" #click="handlesubmit();Togglebtn();">close</button>
</div>
<div class="buttons">
<div class="button-groups">
<button type="button" #click="toggle(book.id);flip(book.id);" v-if="state==true" class="AddBag">Add to Bag</button>
<button v-if="state==true" class="wishlist">wishlist</button>
</div>
<div v-if="state==false" class="AddedBag">
<button class="big-btn">Added to Bag</button>
</div>
</div>
</div>
</div>
</template>
<script>
import service from '../service/User'
export default {
data() {
return {
result: 0,
authorPrefix: 'by',
pricePrefix: 'Rs.',
defaultStrikePrice: '(2000)',
buttonValue: 'close',
flag: true,
state: true,
clickedCard: '',
books: [{
id: 0,
file: 'https://images-na.ssl-images-amazon.com/images/I/41MdP5Tn0wL._SX258_BO1,204,203,200_.jpg',
name: 'Default Card',
author: 'Sai',
price: '..'
}, ]
}
},
methods: {
toggle(id) {
this.clickedCard = id;
// this.card.content = this.notes.filter((note) => note.id === id);
console.log(this.clickedCard);
},
flip() {
this.state = !this.state;
},
Togglebtn() {
this.flag = !this.flag;
},
handlesubmit() {
service.userDisplayBooksLowtoHigh().then(response => {
this.books.push(...response.data);
console.log(this.response);
})
},
}
}
</script>
<style lang="scss" scoped>
#import "#/styles/DisplayBooks.scss";
</style>

emmmm...
HightoLow => HighToLow.

There can be several methods, in my opinion, to achieve conditional rendering of components which I think your question asks for. Two of them which are highly useful are:
Using v-if and v-else where you must define a flag that handles the logic for component rendering. Also, wrapping them in a transition tag would a good idea to make the switch with a transition.
<transition>
<component1 v-if="flag" />
<component2 v-else />
</transition>
Dynamic Components, we use the component tag and is attribute. The component can then be switched using the name of the component.
<component is="nameofComponent" />
You can read more about dynamic components in vuejs docs.
While the dynamic component looks neat, a switch with transition can be a nice addition.

React map adding background color special elements

I use map but I have one problem I am trying to set the background of a certain element inside the map, in my case it is "item .title" I want my element to look like this https://ibb.co/ccJzD6g as you can see in the picture background color " 100% "which I specifically set in the console for but in fact if I set" background: orange "for the sidebar_list class, then the color will be applied to all elements including the rest , https://ibb.co/ZBTX3hd and if I set the background for the titleName class it looks like this https://ibb.co/84RKBBw but I want it to look like this https://ibb.co/ccJzD6g how do i solve this problem?
Lesson.jsx
import React from 'react';
import less from "./css/lesson.module.css";
import "./css/betaLesson.css";
import { FontAwesomeIcon } from "#fortawesome/react-fontawesome";
import { Navbar } from "../../../Navbar/Navbar";
export class Lessons extends React.Component {
constructor(props) {
super(props);
this.state = {
indexDescription: 0,
}
}
render() {
const listLessons = this.props.lesson.map((item, index) => {
return (
<li key={index} className={less.sidebar_list} onClick={() => {
this.setState({ indexDescription: index })
}}>
<div>
<FontAwesomeIcon className={less.item_icon} icon={item.iconName} />
</div>
<div style={{background: "orange"}} className={less.titleName}>
<p>{item.title}</p>
</div>
<div className={less.titleName}>
<p>{item.titleName}</p>
</div>
</li>
);
});
return (
<>
<div className="abc">
<Navbar color="blue" bg="tomato" centerFlexNavbarContainer="flex"
navbarSearchPage="Search" navbarHomePage="Home" centerHeadlineNavbarColumn="center" />
<div className={less.wrapper}>
<div>
<div className={less.sidebar}>
<div>
<ul>
{listLessons}
</ul>
</div>
</div>
</div>
<div className={less.main_content}>
<div className={less.main_inside_content}>
<div className={less.header}>
<div>
<h2>JavaScript JSON Reference</h2>
</div>
</div>
<div className={less.info}>
<div className={less.description}>
<p>
{
this.props.lesson[this.state.indexDescription]["description"]
}
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</>
);
}
}

First question answer: Create a new component with its own attributes separately and map/passdown the properties to the component.
Here's an example: https://codesandbox.io/s/objective-hopper-2st8g?file=/src/Lesson.js

Uncaught TypeError: Cannot read property 'map' of undefined while using Rcipe API

I'm facing this problem while mapping over ingredients.
const {
image_url,
publisher,
publisher_url,
source_url,
title,
ingredients
} = this.state.recipe;
{
ingredients.map((item, index) => {
return (
<li key={index} className="list-group-item text-slanted">
{item}{" "}
</li>
);
});
}
I consoled logged ingredients after destructing, to check whether I've data or not and I receive this array.
[
"2 jalapeno peppers, cut in half lengthwise and seeded",
"2 slices sourdough bread",
"1 tablespoon butter, room temperature",
"2 tablespoons cream cheese, room temperature",
"1/2 cup jack and cheddar cheese, shredded",
"1 tablespoon tortilla chips, crumbled"
];
And I tried to wrap ingredient in array something like this.. [ingredients] it's working but not looping over it. It just returns the whole array as one. None of the answer related to this solved my problem.
This is the whole code.
import React, { Component } from 'react'
import {Link} from 'react-router-dom'
export default class DishRecipe extends Component {
constructor(props){
super(props)
this.state = {
recipe: [],
url: `API_URL=${
this.props.match.params.recipe_id
}`
}
}
async componentDidMount(){
try {
const data = await fetch(this.state.url);
// console.log(data);
const jsonData = await data.json();
this.setState({
recipe: jsonData.recipe
});
} catch (error) {
console.log(error);
}
// console.log(this.state.recipe);
}
render() {
const {
image_url,
publisher,
publisher_url,
source_url,
title,
ingredients
} = this.state.recipe;
return (
<div>
<div className="container">
<div className="row">
<div className="col-10 mx-auto col-md-6 my-3">
<Link
to ="/"
className = "btn btn-warning mb-5 text-capitalize"
>
Back to recipe list
</Link>
<img
src={image_url}
className = "d-block w-100"
alt=""
/>
</div>
{/* details */}
<div className="col-10 mx-auto col-md-6 my-3">
<h6 className = "text-uppercase">{title}</h6>
<h6 className="text-warning text-capitalize text-slanted">
provided by {publisher}
</h6>
<a
href={publisher_url}
target = "_blank"
rel="noopener noreferrer"
className = "btn btn-primary mt-2 text-capitalize"
>Publisher webpage</a>
<a
href={source_url}
target = "_blank"
rel="noopener noreferrer"
className = "btn btn-success mt-2 ml-2 text-capitalize"
>Source Page</a>
<ul className="list-group mt-4">
<h2 className="mt-3 mb-4">Ingredients</h2>
{
ingredients.map((item, index) =>{
return(
<li
key = {index}
className="list-group-item text-slanted"
>
{item}
</li>
);
})
}
</ul>
</div>
</div>
</div>
</div>
)
}
}

Try identifying ingredients with an empty array as an initial value in you state
like this:
state = {
recipe: {
ingredients: []
}
}

How to make a function return separate arrays according to the input value and pass it to the view in React

I am working on a React project where I am calling a list of books from an API and passing it to 3 different categories based on the user selection.So, all the books from the API will be first retrieved in the search page.Each book will have a drop-down select option which will have 3 options for the book:
Currently Reading
Want to read and
Read
. So, on another page, there are these 3 shelves for each section.So, when the user selects an option from the drop-down, the book will transfer to the respective shelf.And the user can even move the books from one shelf to another shelf according to their experience with the book.
So, currently, I am able to pass the books from the main search page to their shelf.What I am stuck at is passing the books from one shelf to another.
Updated the Code with a separate Component for the Book Shelf:
import React, { Component } from 'react';
import BookShelf from './CurrentlyReading.js'
class BooksList extends Component {
constructor(props) {
super(props);
this.state={
showSearchPage: false,
books: this.props.books.map(book => Object.assign({}, book, {status:"none"}))
};
this.handleChange = this.handleChange.bind(this);
}
handleChange=(index,event) => {
let books = this.state.books;
books[index].status = event.target.value;
this.setState({ books });
}
componentWillReceiveProps(nextProps) {
if (this.props.books !== nextProps.books) {
this.setState({ books: nextProps.books.map(book => Object.assign({}, book, { status: "none" })) });
}
}
render() {
const currentlyReading = this.state.books.filter(book => book.status === "currentlyReading");
console.log(currentlyReading);
var result = currentlyReading.map(a => a.title);
console.log(result);
const wantToRead = this.state.books.filter(book => book.status === "wantToRead");
const read = this.state.books.filter(book => book.status === "read");
return(
<div className="app">
{this.state.showSearchPage ? (
<div className="search-books">
<div className="search-books-bar">
<a className="close-search" onClick={() => this.setState({ showSearchPage: false })}>Close</a>
<div className="search-books-input-wrapper">
<input type="text" placeholder="Search by title or author"/>
</div>
</div>
<div className="search-books-results">
<ol className="book-search">
{<div className="book-search">
<BookShelf bookDetail={this.state.books} />
</div>
}
</ol>
</div>
</div>
) : (
<div className="list-books">
<div className="list-books-title">
<h1>MyReads</h1>
</div>
<div className="list-books-content">
<div>
<div className="bookshelf">
<h2 className="bookshelf-title">Currently Reading</h2>
<div className="bookshelf-books">
<ol className="books-grid">
<BookShelf bookDetail={currentlyReading} />
</ol>
</div>
</div>
<div className="bookshelf">
<h2 className="bookshelf-title">Want to Read</h2>
<div className="bookshelf-books">
<ol className="books-grid">
<BookShelf bookDetail={wantToRead} />
</ol>
</div>
</div>
<div className="bookshelf">
<h2 className="bookshelf-title">Read</h2>
<div className="bookshelf-books">
<ol className="books-grid">
<BookShelf bookDetail={read} />
</ol>
</div>
</div>
</div>
</div>
<div className="open-search">
<a onClick={() => this.setState({ showSearchPage: true })}>Add a book</a>
</div>
</div>
)}
</div>
)
}
}
export default BooksList;
I know I need to make some changes in the `handleChange()` method for the books when they are on the shelf.But I am not sure if I can use the present `handleChange()` method which is getting the values from the search page to the bookshelf or Does I need to create a new `handleChange()` method for moving the books to different shelves.Can anyone please help me with this?
**Edit 1: Created new component and tried passing the array as prop.But I am getting which says "this is a reserved word"**
My code for the component:
import React, { Component } from 'react';
class BookShelf extends Component {
constructor(props) {
super(props);
}
render() {
return(
{ this.props.currentlyReading.map((book,index) =>
<li>
<div className="book">
<div className="book-top">
<div className="book-cover" style={{ width: 128, height: 193, backgroundImage: `url(${book.imageLinks.smallThumbnail})` }}></div>
<div className="book-shelf-changer">
<select
value={book.status}
onChange={(event) => this.handleChange(index,event)}>
<option value="none" disabled> Move to...</option>
<option value="currentlyReading">✔ Currently Reading</option>
<option value="wantToRead"> Want to Read</option>
<option selected="selected" value="read"> Read</option>
<option value="none"> None</option>
</select>
<p>{book.status}</p>
</div>
</div>
<div className="book-title">{book.title}</div>
<div className="book-authors">{book.authors}</div>
</div>
</li>
)}
);
}
}
export default BookShelf;
The new Component for each BookShelf:
import React, { Component } from 'react';
class BookShelf extends Component {
constructor(props) {
super(props);
}
render() {
return(
<div className="book-search">
{ this.props.bookDetail.map((book,index)=>
<li>
<div className="book">
<div className="book-top">
<div className="book-cover" style={{ width: 128, height: 193, backgroundImage: `url(${book.imageLinks.smallThumbnail})` }}></div>
<div className="book-shelf-changer">
<select
value={book.status}
onChange={(event) => this.handleChange(index,event)}>
<option value="none" disabled> Move to...</option>
<option value="currentlyReading">✔ Currently Reading</option>
<option value="wantToRead"> Want to Read</option>
<option selected="selected" value="read"> Read</option>
<option value="none"> None</option>
</select>
<p>{book.status}</p>
</div>
</div>
<div className="book-title">{book.title}</div>
<div className="book-authors">{book.authors}</div>
</div>
</li>
)}
</div>
);
}
}
export default BookShelf;
Edit: Added the updated code with the new component for each shelf

In a separate file like consts.js:
const SHELVES = ['None', 'Currently reading', 'Want to read', 'Read'];
module.exports = { SHELVES };
Top component BooksList:
import { SHELVES } from './consts';
import BookShelf from './BookShelf';
import BookSearch from './BookSearch';
class BooksList extends React.Component {
constructor(props) {
super(props);
state = {
books: []
};
}
// given a shelf-less books array, set shelf to default for all books
setDefaultShelf = (books) => {
this.setState({ books: books.map(book => Object.assign({}, book, {shelf: SHELVES[0]});
}
// todo: search function handler
doSearch = (search) => {
// API call here, should call this.setDefaultShelf with books data when it has returned
}
// shelf selection handler
chooseShelf = (book, shelf) => {
let { books } = this.state;
books.find(b => b === book).shelf = shelf;
this.setState({ books });
}
render() {
return (
<div>
<BookSearch doSearch={this.doSearch} />
<div className="bookshelves">
{SHELVES.map((shelf, index) => {
return (
<BookShelf
key={index}
shelf={shelf}
books={this.state.books.filter(book => book.shelf === shelf)}
chooseShelf={this.chooseShelf}
/>
);
})}
</div>
</div>
);
}
}
BookShelf component:
import Book from './Book';
const BookShelf = ({ shelf, books, chooseShelf }) => {
return (
<div className="bookshelf">
<h2>{shelf}</h2>
<ul>
{books.map((book, index) => {
return (
<Book
key={index}
book={book}
chooseShelf={chooseShelf}
/>
);
})}
</ul>
</div>
);
}
Book component:
import { SHELVES } from './consts';
const Book = ({ book, chooseShelf }) => {
return (
<li>
<div className="book">
<div className="book-top">
<div className="book-cover" style={{ width: 128, height: 193, backgroundImage: `url(${book.imageLinks.smallThumbnail})` }}></div>
<div className="book-shelf-changer">
<select
value={book.shelf}
onChange={(event) => chooseShelf(book, event.target.value)}>
{SHELVES.map(shelf => {
return(<option value={shelf} selected={shelf === book.shelf ? "selected" : ""}>{shelf}</option>);
})}
</select>
</div>
</div>
<div className="book-title">{book.title}</div>
<div className="book-authors">{book.authors}</div>
</div>
</li>
);
}
You'd still have to define & create the BookSearch component and hook it to the API through the parent doSearch method, add module.exports for all components, proper React import statements, etc. but the gist of it is here.

My React application will not put or post on submit on mobile phones but will work on desktop devices

Below is an example of me editing a "course" object in the database. Works perfectly fine on desktop but not on my iPhone. I'm unable to check on Android or other devices.
Not sure what more detail I could add but I need to since StackOverflow won't let me post until I use this filler. Please ignore this entire paragraph....
imports...
class EditCoursePage extends React.Component {
constructor(props, context) {
super(props, context);
this.state = {
name: this.props.name,
submitted: false,
_creator: {},
};
this.updateName = this.updateName.bind(this);
this.onSubmit = this.onSubmit.bind(this);
this.handleLogout = this.handleLogout.bind(this);
this.handleBack = this.handleBack.bind(this);
}
handleBack(event) {
window.location.href = `/courses/${this.props.match.params.cuid}`;
}
updateName(event) {
var input = event.target.value;
this.setState({
name: input,
});
}
componentWillMount() {
this.props.dispatch(actions.getCourse(this.props.match.params.cuid));
}
componentDidMount() {
this.props.dispatch(actions.getCourse(this.props.match.params.cuid));
}
onSubmit(event) {
const name = this.state.name;
const instructor = cookies.get('instructor')._id;
console.log(cookies.get('instructor')._id);
this.setState({
submitted: true,
});
this.props.dispatch(actions.editCourse(name,this.props.match.params.cuid));
console.log(this.props.name);
console.log(name, cookies.get('instructor')._id);
}
render() {
if (this.state.submitted) {
window.location.href = `https://young-mountain-65748.herokuapp.com/courses/${this.props.match.params.cuid}`;
}
return (
<div className="edit-course-form">
<div className="menu">
<Menu>
<a
id="dashboard-return"
className="menu-item"
href={`/courses/${this.props.match.params.cuid}`}
>
Back to Your Course
</a>
<a id="dashboard-logout" className="menu-item" href="/login">
Logout
</a>
</Menu>
</div>
<div className="mobile-header">
<div className="mobile-name">{this.props.name}</div>
</div>
<div className="edit-course-nav-options">
<div className="course-app-name">School Management App</div>
<ul>
<li>
<Link to="/login" onClick={this.handleLogout}>Log out </Link>
</li>
<li>
<Link to={`/courses/${this.props.match.params.cuid}`}>
Back to Your Course
</Link>
</li>
</ul>
</div>
<div className="container">
<div className="edit-course-name"><h2>{this.props.name}</h2></div>
<div className="submitForm">
<div className="field-line">
<label htmlFor="coursename">New Course Name:</label>
<input
id="coursename"
name="coursename"
value={this.state.name}
onChange={this.updateName}
/>
</div>
</div>
</div>
<div className="edit-course-buttons">
<button className="edit-course" onClick={this.onSubmit}>
Edit Course
</button>
<button className="edit-course-back" onClick={this.handleBack}>
Back
</button>
</div>
</div>
);
}
}
const mapStateToProps = (state, props) => {
return {
name: state.course.course.name,
_creator: state.course._creator,
};
};
export default connect(mapStateToProps)(EditCoursePage);