We Keep Coding

How to hide slotted element before rendering the vue template in vueJs 3?

See this images
i dont want to display here those elements
See the Below code sample
sample.blade.php
<create-form id= "create_form" title="Sample Form" >
<div class="col-md-6">
<label class="form-label" for="multicol-username">Username</label>
<input type="text" id="multicol-username" class="form-control" placeholder="john.doe" name="ma_user_id" data-type="varchar" required>
</div>
<div class="col-md-6">
<label class="form-label" for="multicol-email">Email</label>
<div class="input-group input-group-merge">
<input type="text" id="multicol-email" class="form-control" placeholder="john.doe" aria-label="john.doe" aria-describedby="multicol-email2" name="password" data-editmode="false" data-editname="email">
<span class="input-group-text" id="multicol-email2">#example.com</span>
</div>
</div>
</create-form>
createForm.vue
<template>
<div class="card mb-4" v-show="showForm">
<h5 class="card-header">{{title}}</h5>
<form class="card-body" id="createForm" enctype="multipart/form-data" ref="createForm">
<div class="row g-3">
<slot></slot>
<div class="pt-4">
<button type="submit" class="btn btn-primary me-sm-3 me-1" id="save_return">Submit</button>
<button type="reset" class="btn btn-label-secondary" #click="hideForm">Cancel</button>
</div>
</div>
</form>
</div>
</template>
<script>
export default {
props: ['title'],
setup() {},
data() {
return {
}
},
created() {
},
mounted() {
},
methods: {
},
}
</script>
app.js
require('./bootstrap')
import { createApp } from 'vue'
import createForm from './components/createForm';
const app = createApp({})
app.component('create-form', createForm);
app.mount('#app')

It sounds like you want the template that's rendered by the php backend to not be visible until vue is able to handle it, though I'm not 100% sure that's the case.
If that is the case, you could use the v-cloak directive
This directive is only needed in no-build-step setups.
When using in-DOM templates, there can be a "flash of un-compiled templates": the user may see raw mustache tags until the mounted component replaces them with rendered content.
v-cloak will remain on the element until the associated component instance is mounted. Combined with CSS rules such as [v-cloak] { display: none }, it can be used to hide the raw templates until the component is ready.
<create-form id="create_form" title="Sample Form" v-cloak>
...
<style>
[v-cloak] { display: none }
</style>

<select> tag is not showing if I apply the select picker class, that I need

I need to retrieve the data from the second select , the one where I inserted the class select picker , but the data are not showing when I try to use this bootstrap-select component, the component is working properly I tried but I think that something is wrong with the insertion between the two select tags.
Or if anyone knows how can I create a multiselect for that skills will be great. Basically when a student selects a topic then a list of skills will appear and he can select multiple. Now I am trying with the react-bootstrap-multiselect that tadeo suggested but I have similar problem. Thanks in advance .(I have re-modified the code)
import UserContext from "./context/userContext";
import "../styles/slide_left.css";
import { trackPromise } from "react-promise-tracker";
import { getTopics} from "./../services/topicService";
import _ from "lodash"
import Multiselect from "react-bootstrap-multiselect";
class Topic extends Component {
state = {
topics: [],
selectedTopic: {}
}
async componentDidMount() {
const {data: topics} = await trackPromise(getTopics());
this.setState({topics});
}
selectTopicHandler = (e) => {
const selectedTopic = this.state.topics.filter(topic => topic.title === e.target.value)
this.setState({selectedTopic})
}
render() {
const {topics} = this.state
return (
<UserContext.Consumer>
{(user) => (
<main
role="main"
className="slide-left col-md-9 ml-sm-auto col-lg-10 px-md-4 "
>
<div className="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
<h1 className="h2">Topic and Skill selection</h1>
<div className="btn-toolbar mb-2 mb-md-0">
<div className="btn-group mr-2">
<button
type="button"
className="btn btn-sm btn-outline-secondary"
>
Edit
</button>
<button
type="button"
className="btn btn-sm btn-outline-success"
>
Save
</button>
</div>
</div>
</div>
<div class="form-preferences" > <div className="form-group">
ID: {user.name} <div>Email: {user.email}</div>
</div>
<form action="" class="form-preferences">
<div className="form-group">
<h5>Select your Topic</h5>
<select name="topic" id="topic" className="form-control" onChange={this.selectTopicHandler} >
{this.state.topics.map(topic=><option>{topic.title}</option>)}
</select>
</div>
{!_.isEmpty(this.state.selectedTopic) && <React.Fragment> <h5>Select your Skills</h5>
<Multiselect
options={this.state.selectedTopic[0].skills.map(skill=><option key={skill} >{skill}</option>)}
/>
</React.Fragment>}
</form>
</div>
</main>
)}
</UserContext.Consumer>
);
}
}
export default Topic;

there is an npm package https://www.npmjs.com/package/react-bootstrap-multiselect that might be helpful, if you want to create a multiselect. Install it like so:
npm install react-bootstrap-multiselect
It has a React Class called Multiselect.
import Multiselect from 'react-bootstrap-multiselect';
Then you can use the class to render the react component like so:
<Multiselect/>
It requires the bootstrap css to be active but that should already be the case in your project.

React - How to resolve: "JSX expression must have parent and expression expected" error in vs code

I have a simple App.js file which is rendering fine in the browser but I am getting some problems or errors in the VS code editor.
I am getting these errors -
My App.js:
import React, { Component } from "react";
import css from "./App.less";
import DonutChart from "./DonutChart";
import TimeLineChart from "./TimeLineChart";
import DataTable from "./DataTable";
import SidebarSample from "./SidebarSample";
class App extends Component {
constructor(props) {
super(props);
}
render() {
let panelLeftCss = css.panel;
panelLeftCss += " " + css.leftPanel;
let panelRightCss = css.panel;
panelRightCss += " " + css.rightPanel;
return (
<div>
<div className="header">
<div>
<h1>Welcome Admin, My Dashboard</h1>
</div>
</div>
<div>
<SidebarSample />
</div>
<div className={css.main}>
<div className={panelLeftCss}>
<div className={css.panelHeader}>Donut Chart</div>
<div className={css.panelBody}>
<div>
<DonutChart />
</div>
</div>
</div>
<div className={panelRightCss}>
<div className={css.panelHeader}>Line Chart</div>
<div className={css.panelBody}>
<div>
<TimeLineChart />
</div>
</div>
</div>
</div>
<div>
<div className={css.panelHeader}>Data Table</div>
<div>
<DataTable />
</div>
</div>
</div>
);
}
}
export default App;
I have tried to add a <React.Fragment> also but it's not resolving the errors in the VS code editor.
Is there any tool that I can use which solves this automatically, like prettier etc?
Please guide me.

Prettier or any other code formatting tools won't help you if you do not enclose your div with tags properly.
You forgot your closing </div> tag at the end of your code.
Also you have an extra </div> tag near your <TimeLineChart> there.
Check the formatted codes here as below. It should work.
You just need to be more careful in placing the tags.
<div>
<div className="header">
<div>
<h1>Welcome Admin, My Dashboard</h1>
</div>
</div>
<div>
<SidebarSample />
</div>
<div className={css.main}>
<div className={panelLeftCss}>
<div className={css.panelHeader}>Donut Chart</div>
<div className={css.panelBody}>
<div>
<DonutChart />
</div>
</div>
</div>
<div className={panelRightCss}>
<div className={css.panelHeader}>Line Chart</div>
<div className={css.panelBody}>
<div>
<TimeLineChart />
</div>
</div>
</div>
<div>
<div className={css.panelHeader}>Data Table</div>
<div>
<DataTable />
</div>
</div>
</div>
</div>

Check your file extension its .ts
It must be .tsx(if you're using TypeScript)
Same for App.js change it to App.jsx (if you're using JavaScript)
then,
try this,
all your code must be in single parent tag, like i did inside <div>
as when render method returns only single parent, so you must careful while writing elements having only one parent or you wrap your code inside parent <div>
import React, { Component } from "react";
import css from "./App.less";
import DonutChart from "./DonutChart";
import TimeLineChart from "./TimeLineChart";
import DataTable from "./DataTable";
import SidebarSample from "./SidebarSample";
class App extends Component {
constructor(props) {
super(props);
}
render() {
let panelLeftCss = css.panel;
panelLeftCss += " " + css.leftPanel;
let panelRightCss = css.panel;
panelRightCss += " " + css.rightPanel;
return (
<div>
<div className="header">
<div>
<h1>Welcome Admin, My Dashboard</h1>
</div>
</div>
<div>
<SidebarSample />
</div>
<div className={css.main}>
<div className={panelLeftCss}>
<div className={css.panelHeader}>Donut Chart</div>
<div className={css.panelBody}>
<div>
<DonutChart />
</div>
</div>
</div>
<div className={panelRightCss}>
<div className={css.panelHeader}>Line Chart</div>
<div className={css.panelBody}>
<div>
<TimeLineChart />
</div>
</div>
</div>
<div>
<div className={css.panelHeader}>Data Table</div>
<div>
<DataTable />
</div>
</div>
</div>
</div>
);
}
}
export default App;

Couldn't get rid of react warning of unique key in map

What's wrong with my below code? I had key={obj._id} and I expect I will not see the warning but I'm still getting it.
Warning: Each child in an array or iterator should have a unique "key"
prop. Check the render method..
renderListItems(items){
return(
<div>
{map(items, obj =>
<div key={obj._id} className="panel-body panel-row">
<div className="row">
<div className="col-md-12">
<h2 className="title">{obj.display_name}</h2>
<p className="edited">Last edited on {moment(obj.updated_at).format('DD MMM YYYY')}</p>
<div className="actions_wrap">
<Link to={`/mall-promospace/edit/${obj._id}`}>Edit</Link>
<a onClick={()=> this.setState({openConfirmationModal:true, selectedItemId: obj._id, selectedItemName: obj.display_name})}>Delete</a>
</div>
</div>
</div>
</div>
)}
</div>
)
}

I think you are coding some things wrong. You should apply the function "map" over an array.
Try this:
renderListItems(items){
return(
<div>
{items.map(obj =>
<div key={obj._id} className="panel-body panel-row">
<div className="row">
<div className="col-md-12">
<h2 className="title">{obj.display_name}</h2>
<p className="edited">Last edited on {moment(obj.updated_at).format('DD MMM YYYY')}</p>
<div className="actions_wrap">
<Link to={`/mall-promospace/edit/${obj._id}`}>Edit</Link>
<a onClick={()=> this.setState({openConfirmationModal:true, selectedItemId: obj._id, selectedItemName: obj.display_name})}>Delete</a>
</div>
</div>
</div>
</div>
)}
</div>
)
}

items.map((obj, i) => <div key={i}></div>)

React onClick handler in map function

I've been searching the web for answers to my question, but without success. I am trying to add a simple react click handler to my button, but I can't seem to make it work. It is probably something really simple, I just can't wrap my head around it.
Here is my code:
export default class ReviewBox extends Component {
deleteReview() {
console.log("hey");
}
render() {
const {reviews, date, lectureId} = this.props;
const that = this;
return (
<div className="container content-sm">
<div className="headline"><h2>Reviews</h2> <span>{date}</span></div>
<div className="row margin-bottom-20">
{reviews.map(review => {
return(
<div className="col-md-3 col-sm-6">
<div className="thumbnails thumbnail-style thumbnail-kenburn">
<div className="caption">
<h3>{review.comment}</h3> <br />
<button className="btn btn-danger" onClick={this.deleteReview()}>Delete</button>
</div>
</div>
</div>
)
})}
</div>
<hr />
<AddReview lectureId={lectureId} />
</div>
)
}
}
It refuses to fire the function when I click a button. I've tried with .bind(this) and onClick={() => this.deleteReview} etc.
All help appreciated!

I think you are missing braces () in arrow function
<button className="btn btn-danger" onClick={() => this.deleteReview()}>Delete</button>

i think this will help you.....
export default class ReviewBox extends Component {
deleteReview() {
console.log("hey");
},
render() {
const {reviews, date, lectureId} = this.props;
const that = this;
return (
<div className="container content-sm">
<div className="headline"><h2>Reviews</h2> <span>{date}</span></div>
<div className="row margin-bottom-20">
{reviews.map(review => {
return(
<div className="col-md-3 col-sm-6">
<div className="thumbnails thumbnail-style thumbnail-kenburn">
<div className="caption">
<h3>{review.comment}</h3> <br />
<button className="btn btn-danger" onClick={this.deleteReview}>Delete</button>
</div>
</div>
</div>
)
})}
</div>
<hr />
<AddReview lectureId={lectureId} />
</div>
)
}
}

Removing () from the onClick function call and using { this.deleteReview } will indeed fire up the method, but if you need to bind this as well inside that method, go with #duwalanise answer.

Ah, now I understand.
It is because I am rendering the react on serverside, that's why the click handler doesn't work.
I will have to render the JS on the client, in order for it to work :)