Error I am getting: ./src/components/IconsOne.js Attempted import error: 'TiHome' is not exported from 'react-icons/fa'.
IconsOne.js:
import { TiHome } from 'react-icons/fa';
const IconsOne = () => {
return (
<div className="homeIcon">
<h3>
<TiHome />
</h3>
</div>
)
}
export default IconsOne
App.js
import './App.css';
import IconsOne from "./components/IconsOne";
function App() {
return (
<div className="App">
<Router>
<IconsOne />
</Router>
</div>
);
}
export default App;
I am trying to build a navbar and the first step is to render a home icon. I used this page for documentation on importing icons for react: https://react-icons.github.io/react-icons/ and the name of the Icon that I'm trying to import is TiHome
The link to the icon is: https://react-icons.github.io/react-icons/search?q=tihome
Thank you.
The problem is fa, that is not the path for Typicons but for FontAwesome, so if you want TiHome from Typicons then according to react-icons you must use instead the ti path, so:
import { TiHome } from 'react-icons/ti';
const IconsOne = () => {
return (
<div className="homeIcon">
<h3>
<TiHome />
</h3>
</div>
)
}
export default IconsOne
Related
I have a component in which i want to call different rtkquery hooks based on a condition. I am making a twitter clone and on the home page i want to call a getPostsList and on the profile page i want to call a getRetweetedPostsList but since the entire page is same apart from this i am using a single component. Now i want to call different hooks in the PostList component based on props? Is this possible? Maybe by using skip? Also is this against best practices?
index.tsx
import type { NextPage } from 'next'
import { useSession} from 'next-auth/react';
import SignUpLoginFullScreen from '../components/SignUpLoginFullScreen';
import LoadingScreen from '../components/LoadingScreen';
import PostsSection from '../components/Posts/PostsSection';
const Home: NextPage = () => {
const {data:session,status}=useSession();
return (
<>
{!session && status==='unauthenticated' &&
<SignUpLoginFullScreen/>
}
{!session && status==='loading' &&
<LoadingScreen/>
}
{session && status==='authenticated' &&
<PostsSection/>
}
</>
)
}
export default Home
PostSection.tsx
import React from 'react'
import { useSession} from 'next-auth/react';
import Sidebar from '../Sidebar';
import Search from '../Search';
import PostsList from '../Posts/PostsList';
import AddPostForm from '../Posts/AddPostForm';
import Modal from '../Modal';
import UsersList from '../UsersList';
const PostsSection=()=>{
const {data:session,status}=useSession();
return (
<>
<Modal>
<AddPostForm />
</Modal>
<div className='flex mx-32 gap-x-5'>
<Sidebar/>
<main className='mr-5 pt-8 flex-1 basis-[45%] border-x-2 border-stone-100 min-h-screen'>
<PostsList currUserId={session?.userId}/>
</main>
<div className='basis-[25%]'>
<Search/>
<UsersList currentUserId={session?.userId}/>
</div>
</div>
</>
)
}
export default PostsSection
PostList.tsx
import React from 'react'
import {useGetPostsQuery} from '../../services/apiSlice';
import LoadingSpinner from '../LoadingSpinner';
import Post from './Post';
interface PropsType{
currUserId:string|any
}
const mapPosts=(posts:any,currUserId:string)=>{
return posts?.map((post:any) => (
<Post key={post.id} currUserId={currUserId} {...post}/>
))
};
const PostsList:React.FC<PropsType>= ({currUserId}) => {
const {data:posts,isLoading,error,isError} = useGetPostsQuery(currUserId);
let content;
content=React.useMemo(()=>mapPosts(posts,currUserId), [posts]);
if(isLoading){
content=<LoadingSpinner/>
}
else if(isError){
let a:any=error
content=<p color='red'>{a?.message}</p>
}
else if(posts){
if(posts.length<=0){
console.log('aye')
content=<p color='black'>No tweets yet</p>;
return null;
}
}
return (
<section className="posts-list">
{content}
</section>
)
}
export default PostsList;
I want to call the PostList component from the profile page but with some props and based on that props i want to call a different hook to which i am calling for the index page.
Profile.tsx
import React from 'react';
import { useSession } from 'next-auth/react';
import LoadingScreen from '../components/LoadingScreen';
import Sidebar from '../components/Sidebar';
import Search from '../components/Search';
import PostsList from '../components/Posts/PostsList';
import AddPostForm from '../components/Posts/AddPostForm';
import Modal from '../components/Modal';
import UsersList from '../components/UsersList';
import SignUpLoginFullScreen from '../components/SignUpLoginFullScreen';
import PostsSection from '../components/Posts/PostsSection';
export default function Profile() {
const {data:session,status}=useSession();
return (
<>
{!session && status==='unauthenticated' &&
<SignUpLoginFullScreen/>
}
{!session && status==='loading' &&
<LoadingScreen/>
}
{session && status==='authenticated' &&
<PostsSection/>
}
</>
)
}
I would use different components to call different hooks, then pass the data to a reusable common component.
I am working with React + JS in an app to render news of the NYTimes (https://developer.nytimes.com/). Well, the matter is that I want to render the most viewed in the last 7 days, but organized through categories or sections. And I have the problem with the rendering of my sections.
Here my app.js component:
import React, {useEffect, useState} from "react";
import ListOfSections from "./components/ListOfSections";
import getSections from "./services/getSections";
import Navbar from "./shared/Navbar/Navbar";
function App() {
const [section, setSection] = useState([]);
useEffect(() => {
getSections().then(sections=>setSection(sections));
}, [])
return (
<div>
<Navbar/>
<ListOfSections section={section}></ListOfSections>
</div>
);
}
export default App;
Here my ListOfSections component:
import React from 'react';
import Section from './Section';
export default function ListOfSections ({section}) {
return (
<div className="container_list_sections mt-4 ml-4">
{
section.map(({section})=>
<Section
section={section}
/>
)
}
</div>
)
};
And here my Section component:
import React from 'react';
export default function Section ({section}) {
return (
<div>
<h1 className="section-container mr-4">{section}</h1>
</div>
)
};
Well, the problem is when I do console.log(section) in the Section component, it returns me undefined. But if I do console.log(section) in ListOfSections component, it has received the information of the props. So... why when I am passing the prop section from ListOfSections to Section, is it undefined? Where is it the error? I dont understand. The result for the moment is this one:
Thanks :)
Your useEffect should look as follows:
const [sections, setSections] = useState([]);
...
useEffect(() => {
getSections().then(sections=>setSections(sections));
}, [])
When you get data back it seems to be an array of sections so it should be a plural.
So when you pass sections down as a prop, it should be:
<ListOfSections sections={sections}/>
Which then allows you to map in <ListOfSections>
export default function ListOfSections ({sections}) {
return (
<div className="container_list_sections mt-4 ml-4">
{
sections.map(section =>
<Section
section={section}
/>
)
}
</div>
)
};
For maps, you should also set a key, you can read more here
i have created a demo file where i have set up a dispatcher and same is been connecting through connect function to the App component.
But while I'm trying to access props in component, its showing me blank rather it should have a dispatch function.
Please assist to get through.
import App from "../Components/App";
import { connect } from "react-redux";
import { buyCartAction } from "../Services/Action";
const mapStateToProps =()=>{
}
const mapDispatchToProps = dispatch => (
{ buyThisProduct: data => dispatch(buyCartAction(data)) }
)
export default connect(mapStateToProps, mapDispatchToProps)(App)`
import React from "react"
function App(props) {
console.log(props)
return (
<>
<h1 className="heading">Good Day Page</h1>
<div className="cart_bar">
<img className="img_scale" src="https://images.news18.com/ibnlive/uploads/2021/08/1628224744_hp-envy-14-laptop-1600x900.jpg" alt="Lenovo Laptop" />
<div className= "child_cart">
<p className="info_bar">Lenovo Probook 15 series </p>
<span className="info_bar_price">Price at just Rs: 37000/-</span>
<br />
<button className="btn_buy"}>Buy</button>
</div>
</div>
</>
)
}
export default App;
Action creator as below:
import { buy } from "../Constants"
export const buyCartAction =(data) =>{
return{
type: buy,
data: data
}
}
Console output as below.
enter image description here
Hey all im looking for help. im having some trouble with passing data from one child component to another child component using the context api. But i get this typeError instead, i tried a few searches so far without much luck. if anyone can't point me in the right direction it would be much appreciated!
thanks
CurrencyProvider.js
import { React, Component} from 'react';
export const MContext = React.createContext('');
class CurrencyProvider extends Component {
constructor() {
super()
this.state = {
setinputValue: (value) => this.setState({ inputValue: value })
}
}
render() {
return (
<MContext.Provider value={this.state}>
{this.props.children}
</MContext.Provider>)
}
}
export default CurrencyProvider;
Dropdown.js
import { useQuery, gql } from "#apollo/client";
import { useState } from "react";
import './Dropdown.scss';
import { MContext } from "../CurrencyProvider";
const EXCHANGE_RATES = gql`
query GetExchangeRates {
rates(currency: "AUD") {
currency
rate
name
}
}
`;
function Dropdown() {
const [isToggled, setToggle] = useState(false);
const { data, loading, error } = useQuery(EXCHANGE_RATES);
if (loading) {
return <div>loading</div>;
}
if (error) {
return <div>{error}</div>;
}
return (
<div className="custom-dropdown">
<ul className={`dropdown-menu ${isToggled ? 'open':''}`}>
<li value="0" className="first-item" onClick={() => setToggle(!isToggled)} onKeyPress={() => setToggle(!isToggled)} tabIndex="0">Select Currency:</li>
{data.rates.map(({ currency, rate, name },index) => (
<MContext.Consumer>
{(context) => (
<li className="list-item" key={index} data={rate} tabIndex="0" onClick={()=>{context.setinputValue(rate)}}> <span>{name}: {currency}</span></li>
)}
</MContext.Consumer>
))}
</ul>
</div>
);
}
export default Dropdown;
Input.js
import './Input.scss';
import { MContext } from "../CurrencyProvider";
function Input() {
return(
<MContext.Consumer>
{(context) => (
<input value={context.state.inputValue} />
)}
</MContext.Consumer>
);
}
export default Input;
CurrencyContainer.js
import Dropdown from '../Dropdown/Dropdown';
import Input from '../Input/Input';
import './CurrencyContainer.scss';
import CurrencyProvider from '../CurrencyProvider';
function CurrencyContainer() {
return (
<div className='currency-container'>
<h1 >Select Items</h1>
<div className="currency-wrapper">
<CurrencyProvider>
<div><Input /></div>
<div><Dropdown /></div>
<div><Dropdown /></div>
</CurrencyProvider>
</div>
</div>
);
}
export default CurrencyContainer;
App.js
import logo from './logo.svg';
import './App.scss';
import { client } from "./ApolloClient/client";
import { ApolloProvider } from '#apollo/client';
import CurrencyContainer from './CurrencyContainer/CurrencyContainer';
function App() {
return (
<ApolloProvider client={client}>
<div className="App">
<img src={logo} className="App-logo" alt="logo" />
<CurrencyContainer />
</div>
</ApolloProvider>
);
}
export default App;
Why don't you try placing something more in the likes of this in a separate file mcontext.context.jsx:
import { createContext } from "react";
const MContext = createContext('');
export default MContext;
Then you can import it and
get values by importing your newly created context, the useContext hook and adding something like this to the top of a functional component which is encapsulated inside a MContext.Provider node:
const val = useContext(MContext);
set values:
<MContext.Provider value={mcontextValue}>
</MContext.Provider>
All children inside your MContext.Provider node and their children will have access to your MContext value given you get it as I showed you in the 1st part of the answer.
Your React import is incorrect. Change it to:
import React, {Component} from 'react';
React is the default export, not a named export.
React package doesn't have a named import called React, it has a default import that people generally use React for, so you should change this line
import { React, Component } from 'react';
to this
import React, { Component } from 'react';
If you use React 17+, you don't need to import React from 'react'; anymore, you can remove any mentioning of React from your import, so your import will look like this
import { createContext } from 'react';
But you have to turn off the lint rules for this import in your .eslintrc.json file like so
{
"rules": {
...
"react/jsx-uses-react": "off",
"react/react-in-jsx-scope": "off"
}
}
as you may get from the title, passing props in react is not working. And i don´t get why.
Main Ap Component
import './App.css';
import Licence from './Licence';
function App() {
return (
<>
<Licence>
test={"Test123"}
</Licence>
</>
);
}
export default App;
Other Component
import React from 'react';
const Licence = (props) => {
return (
<div>
<h1>name : {props.test}</h1>
</div>
)
}
export default Licence;
Problem
if i start the script and render the page, nothing is shown. What am I doing wrong?
Licence component looks good to me!
All you have to do is change up how you set it up on App. Props need to be passed on the tag, like this:
import './App.css';
import Licence from './Licence';
function App() {
return (
<>
<Licence test={"Test123"} />
</>
);
}
export default App;
update your App component:
```
<Licence
test={"Test123"} />
```
Pass like this
<Licence test={"Test123"} />
and access like this
const Licence = (props) => {
return (
<div>
<h1>name : {props.test}</h1>
</div>
)
}
Another way
<Licence>
Test123
</Licence>
access like this
const Licence = (props) => {
return (
<div>
<h1>name : {props.children}</h1>
</div>
)
}