I am trying to create a tab component with simple react state. But when using the
hidden
attribute the page start loading forever. Even if I restart the project the problem appears again.
import React, { useState } from "react";
const InventoryMain = () => {
const [tabIndex, setTabIndex] = useState(0);
return (
<div>
<div className="tabs">
<span onClick={()=> setTabIndex(0)} className="tab tab-lifted" >Tab 1</span>
<span onClick={()=> setTabIndex(1)} className="tab tab-lifted tab-active">Tab 2</span>
</div>
<div className="tab-contents">
<div className="tab-1" hidden={tabIndex !== 0}>Tab1 </div>
<div className="tab-2" hidden={tabIndex !== 1}>Tab2</div>
</div>
</div>
);
};
export default InventoryMain;
I was expecting a simple tab and was watching this video.
Simple React Tab video
Related
import React from 'react';
import Navigation from "../components/Nagivation";
const Home = () => {
return (
<div className="home">
<Navigation/>
<div className="homeContent">
<div className="content">
<div className="pdf">
CV Download
</div>
</div>
</div>
</div>
);
};
export default Home;
The file is into app/public/media/AA.pdf
locally it works very fine, App.pdf is open. But on the AWS server, it doesn't. It opens www.aaaa.com/media/AA.pdf but error the page doesn't exist.
Added download attribute
CV Download
I've completed designing my components with Vue 2, Vuetify and Vue cli - 4.5.15. I tried combining it in a Single Vue file but the components are not showing <v-icons> <v-textfield> and some other elements. I am not sure about why these kind of errors happen. I've attached the code of Component1 and Component2 and also the App.vue file's code.
Also in Control Panel I'm continuously getting error stating
Error in render: "TypeError: Cannot read properties of undefined (reading 'rtl')"
Component 1
<template>
<div class="post-wrap">
<div class="post-header">
<img src="https://www.finetoshine.com/wp-content/uploads/2020/04/Beautiful-Girl-Wallpapers-New-Photos-Images-Pictures.jpg" alt="" class="avator">
<div class="post-header-info">
<a class="location-link mintext"><v-icon small>mdi-map-marker</v-icon> BVB School, Thindal</a>
<span style="float:right;margin-right: 10px;" class="mintext">Jun 21</span>
<br>
<div style="margin-top:6px;margin-left:1px;display:inline-block;font-size:16px;">Steve Jobs</div>
·<span class="mintext"> Attended a Seminar</span>
<p>🔥 If you're tired of using outline styles for secondary buttons, a soft solid background based on the text color can be a great alternative.</p>
</div>
</div>
<div class="align-straight">
<img src="https://www.gizbot.com/images/2020-09/realme-7_159921061900.jpg" class="multi-img">
<img src="https://www.gizbot.com/images/2020-09/realme-7_159921061900.jpg" class="multi-img">
</div>
<span class="attached-link"> + 2 images</span><br>
<div class="align-straight">
<div class="document-wrap" style="display: inline-block;">
<v-icon dense>mdi-file-document</v-icon> document
</div>
<div class="document-wrap" style="display: inline-block;">
+ 2
</div>
</div>
<div class="align-straight like-bar">
<span><v-icon>mdi-thumb-up</v-icon></span>
<span style="float:right;margin-right: 20px;"><v-icon>mdi-bookmark</v-icon></span>
</div>
</div>
</template>
<script>
export default {
}
</script>
Component 2
<template>
<div class="newpost-wrap">
<v-form>
<div class="newpost-title">What's up</div>
<v-select label="Post Type" v-model="selectedPost" :items="postTypes" outlined></v-select>
<v-textarea v-model="newPost" :counter="280" label="New Post" hint="Share your Achievement !" required outlined></v-textarea>
<span class="update-link" #click="showAttach=!showAttach"><v-icon color="#3a7bd5">mdi-attachment</v-icon> Attach Files</span>
<div class="newpost-icons" v-if="showAttach==true">
<v-file-input small-chips multiple dense prepend-icon="mdi-wallpaper" accept="image/*" ></v-file-input>
<v-file-input small-chips multiple dense prepend-icon="mdi-file-document" accept="document/pdf, document/docx"></v-file-input>
</div>
<div class="update-btn">Post</div>
</v-form>
</div>
</template>
<script>
export default {
data: () => ({
showAttach: false,
newPost: '',
postType: null,
selectedPost: 'Usual',
postTypes: ['Seminar', 'Course', 'Project', 'Usual']
})
}
</script>
App.vue
<template>
<v-app >
<NewPostBar />
<UsualPost />
</v-app>
</template>
<script>
import NewPostBar from '/fac/faculty/src/components/NewPostBar.vue'
import UsualPost from '/fac/faculty/src/components/UsualPost.vue';
export default {
name: 'App',
components: {
NewPostBar,UsualPost
},
data: () => ({
})
};
</script>
Solved:
Hope this answers similar problems...
First I initialized a Vue project without including a router but then installed it as a plugin...then I got this error
So I initialized a Fresh project with a router installed with that...Now there's no error in the console, and the Project works just fine
But I am genuinely not aware of why this happened
Thanks to #tony19 for your response, So I was keep checking what was going wrong...
I am creating a mobile app with Ionic React. I render multiple IonCards with dynamic data coming from a local JSON file. Actually, I'm mapping through the JSON file. Everything is fine. But it takes a couple of seconds to render all the cards. I want to minimize the loading time. Please help me with how do I optimize the render time and overall performance of the application. The code is below:
//imports...
import data from "../db/data.json";
const Products: React.FC = (filterText) => {
const [searchText, setSearchText] = useState("");
const categories = vocabTopics
//filtering CATEGORIES
.filter((topic) => {return topic.title.toLowerCase().indexOf(searchText.toLowerCase()) >= 0;})
.map((topic) => {
return (
<IonCol size="12" key={topic.id}>
<IonCard mode="md" routerLink={topic.route} className="except-home-screen-card no-margin no-radius-card">
<div className="flex">
<div className="card-img">
<img src={topic.thumbnail}></img>
</div>
<div className="flex-justify-space-b-w">
<div>
<IonCardSubtitle className="except-home-screen-card-subtitle">{topic.subtitle}</IonCardSubtitle>
<IonCardTitle className="except-home-screen-card-title">{topic.title}</IonCardTitle>
</div>
<div>
<IonIcon icon={chevronForwardOutline} className="card-right-icon"/>
</div>
</div>
</div>
</IonCard>
</IonCol>
);
});
return (
<IonPage>
<IonHeader className="ion-no-border">
<IonToolbar className="top-header">
<IonButtons slot="start" className="top-header-icons color-primary">
<IonBackButton defaultHref="home" /></IonButtons>
<div className="top-title-container">
<IonTitle className="ion-text-center v-center">Products</IonTitle>
</div>
</IonToolbar>
</IonHeader>
<IonContent fullscreen className="bg-style">
<div className="center padding-y">
<h1 className="lg-text ion-no-margin equal-padding">Products Categories</h>
<p className="ion-text-center ion-no-margin subtitle">70+ CATEGORIES</p>
</div>
<IonGrid className="my-grid ion-no-padding">
<IonSearchbar spellcheck={true} autocorrect="on" className="searchbar" value={searchText} mode="ios" onIonChange={(e) => setSearchText(e.detail.value!)}></IonSearchbar>
<IonRow className="center-padding">
<div className="card-container fluid">
{categories}
</div>
</IonRow>
</IonGrid>
</IonContent>
</IonPage>
);
};
export default Products;
I suppose 100 Cards are not visible at the same time in a single "view", so the only solution is the "infinite scrolling" and Display/Create them only when them should became visible. (example: https://forum.ionicframework.com/t/infinite-scrolling-of-data-from-the-api/172933)
Hi people, I am using Semantic UI React for my project. Here I am rendering some content on a Modal. Here you search for the movies and click on add and it adds it below. The problem is that I want the movie list to be aligned with the start of the Search bar. I'm not able to do it. Is there any way using Grid that I can achieve it?
Here is my code:
import React, {useState, useEffect} from 'react';
import {Icon, Button, Modal, Input, Item} from 'semantic-ui-react'
const CreateMovieListModal = (props) => {
const [movieTitle, setMovieTitle] = useState('');
const [movieList, setMovieList] = useState([]);
function handleMovieChange (event, data) {
setMovieTitle(data.value);
}
function addMovie () {
const newMovies = [...movieList, movieTitle];
setMovieList(newMovies);
setMovieTitle('');
}
function showMovieList () {
return movieList.map((currentMovie)=> {
return (
<Item.Group>
<Item>
<Item.Image size='tiny' src='https://react.semantic-ui.com/images/wireframe/image.png' />
<Item.Content verticalAlign='middle'>
<Item.Header as='a'>{currentMovie}</Item.Header>
</Item.Content>
</Item>
</Item.Group>
)
})
}
return (
<Modal open={props.isOpen} onClose={props.onClose}>
<Modal.Header>Add a new list</Modal.Header>
<div style={{marginTop: '10px'}}>
<center>
<Input value={movieTitle} loading={false}
style={{width: '50%'}}
onChange={handleMovieChange}
placeholder='Search For Movies'
/>
<Button onClick={addMovie}>Add Movie</Button>
</center>
</div>
<Modal.Content scrolling>
<div>
{showMovieList()}
</div>
</Modal.Content>
<Modal.Actions>
<Button primary>
Save <Icon name='save' />
</Button>
</Modal.Actions>
</Modal>
);
};
export default CreateMovieListModal;
you need to wrap Input and Movie list into a div, and apply your <center> on that wrapper div:
<center>
<div> <!-- wrapper div -->
<Input value={movieTitle} loading={false}
style={{width: '50%'}}
onChange={handleMovieChange}
placeholder='Search For Movies'
/>
<Button onClick={addMovie}>Add Movie</Button>
<Modal.Content scrolling>
<div>
{showMovieList()}
</div>
</Modal.Content>
</div>
</center>
I am working on a project using MySQL, Angular, Express, and Node. I have a list of objects in a ng-repeat and when I click a specific item I would like to pass the clicked object to another page and show the object's properties through angular.
Here is the code:
HTML:
<div class = "panel panel-info" ng-repeat="job in job">
<div class = "panel-heading clickable">
<h1 class = "panel-title">{{job.title}}</h1>
<span class = "pull-right"><i class = "glyphicon glyphicon-minus"></i></span>
</div>
<div class = "panel-body">
<!--This will soon be the place where the Students information is placed by NodeJS-->
<!--<p style = "text-decoration: underline"> Job Title <p>-->
<p> {{job.description}} </p>
<p> {{job.first_name}} {{job.last_name}}</p>
<p> {{job.location}} </p>
<br>
<div class="form-group">
<div class=" col-sm-15">
<button onclick="location.href='jobPage.html';" type="submit" class="btn btn-default btn-block">Apply</button>
</div>
</div>
</div>
</div>
Controller:
soopControllers.controller("landingController",
function ($scope, $http){
$scope.formData = {};
$http.get('/api/jobLanding')
.success(function(data){
$scope.job = data;
console.log(data);
})
.error(function(data){
console.log('Error: ' + data);
});
//I want this function to get the job and send it to another page
$scope.getJob = function(){
$http.post('/api/job', $scope.formData)
.success(function(data){
$scope.formData = {};
$scope.users = data;
//$location.redirect();
console.log(data);
})
.error(function(data){
console.log('Error: ' + data);
});
};
});
AngularJS applications work the same way as regular web sites when it comes to navigation. The difference is that instead of sending a request to the server to go to the new URL, the router intercepts the location change, and goes to a route. The controller (or the resolve function) of that route then gets what it needs to display.
So, what you need in your ng-repeat instead of your button is
<a ng-href="#/job/{{ job.id }}">Apply</a>
And you then need a route mapped to the path /job/:jobId.
In the controller of this route, you'll then do something like
$http.get('/api/job/' + $routeParams.jobId).then(function(response) {
$scope.job = response.data;
});
How about using ng-click on the repeated element and extract that element in your display/routed page.
<div ng-controller="plandingController"
class = "panel panel-info"
ng-repeat="job in job"
ng-click="value.val=job">
....
</div>
In jobPage.html
<div ng-controller="plandingController" ng-repeat="pickedjob in value.val">