I am building a faq page and can't think of a function for this. Basically I have a .json file with questions and answers and I want onClick to toggle the answer that is meant to be hidden and onMouseOut to hide the answer again.
Apreciate your help
import React, {Component} from 'react';
import questionData from '../components/data/faquestions.json';
import PropTypes from 'prop-types';
import '../assets/toggleQue.scss';
const Faq = ({ data }) => {
return(
<div className="grid-faq-container">
<div className="question">
<p><strong> {data.question}</strong> </p>
</div>
<div className="answer">
<p>{data.answer}</p>
</div>
</div>
)
}
const Faqs = () => {
return (
<>
<h1>FAQs</h1>
<div className="faqIteration">
{questionData && questionData.map((e, key) => {
return (
<Faq
data={e}
key={key}
/>
);
})}
</div>
</>
);
};
Faq.propTypes = {
data: PropTypes.object,
};
export default Faqs;
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
I don't know if I understood you right.
OnClick you add an identifier for the Question into an array. OnMouseOut you can then check, if the question where your mouse just left is inside this array. If yes, hide it. If no, do nothing. You have to add the onMouseOut listener to every question.
Related
New to Google AMP pages. Basically, I am trying to access the AMP State to determine whether or not a div should remain hidden:
import React from 'react';
const MyButton = (props) => {
return (
<>
<Head>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</Head>
<div>
<amp-state id="showHiddenContent" show="false"></amp-state>
<button
type="button"
on="tap:AMP.setState({showHiddenContent: { show: !showHiddenContent.show}})"
>
Show More
</button>
<div hidden={!AMP.getState('showHiddenContent').show}>
<p>Show this when the showHiddenContent state evaluates to true</p>
</div>
</div>
</>
);
};
export default MyButton;
I am met with the following error located on the div tag:
'AMP' is not defined
Any thoughts how I can correct this? I've added the script tag in the HEAD of the component but still get the same error. Thanks!
I would like to create and use this component in React with ES6:
<Menu>
<MenuHeader>Hi</MenuHeader>
<MenuItem>Hello</MenuItem>
<MenuFooter>End</MenuFooter>
</Menu>
I've defined a component to handle this structure:
export class Menu extends React.Component {
render() {
return (
<div ...>
<div ...>
{HOW TO SELECT HEADER?}
</div>
<div ...>
{HOW TO SELECT ITEM?}
</div>
<div ...>
{HOW TO SELECT FOOTER?}
</div>
</div>
)}
}
It's okay to iterate over children and select by type.name while running on the dev server without transpilation:
{ React.Children.map(this.props.children, child => { return child.props.type === 'MenuItem' ? <>{ child }</> : '' } ) }
But it does not work after building it (cause of uglify/minify process).
For example, Semantic UI React handles it well - but it uses interfaces and written in TypeScript so I cannot use it as reference.
And one more thing (ah Steve:): I do not want to use npm eject.
This is normally done by allowing the compound components inside them to render their own children and Menu would just render the children it gets, hence maintaining the order.
You might want to share the state of things happening between the Header, Body and Footer, so we add a ContextProvider to the Menu component, so they can all share common state.
const rootEl = document.getElementById('root');
const { render } = ReactDOM;
const { createContext } = React;
function MenuHeader({ children }) {
return (
<header className="menu-header">
{children}
</header>
)
}
function MenuBody({ children }) {
return (
<div className="menu-body">
{children}
</div>
)
}
const MenuContext = createContext();
Menu.Header = MenuHeader;
Menu.Body = MenuBody;
function Menu({ children }) {
return (
<MenuContext.Provider value={null}>
<div className="menu-wrapper">
{children}
</div>
</MenuContext.Provider>
);
}
function App() {
return (
<Menu>
<Menu.Header>Menu Header</Menu.Header>
<Menu.Body>Menu Body</Menu.Body>
</Menu>
);
}
render(<App />, rootEl);
<script crossorigin src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<div id="root" />
Another common technique used by Frameworks like Ant.Design is to map over the children and add common props to them (although context would be the better solution in my opinion)
I'am creating React.js Weather project. Currently working on toggle switch which converts celcius to fahrenheit. The celcius count is created in one component whereas toggle button is created in another component. When the toggle button is clicked it must trigger the count and display it. It works fine when both are created in one component, but, I want to trigger the function from another component. How could I do it? Below is the code for reference
CelToFahr.js (Here the count is displayed)
import React, { Component } from 'react'
import CountUp from 'react-countup';
class CeltoFahr extends Component {
state = {
celOn: true
}
render() {
return (
<React.Fragment>
{/* Code for celcius to farenheit */}
<div className="weather">
<div className="figures">
<div className="figuresWrap2">
<div className="mainFigureWrap">
<CountUp
start={!this.state.celOn ? this.props.temp.cel : this.props.temp.fahr}
end={this.state.celOn ? this.props.temp.cel : this.props.temp.fahr}
duration={2}
>
{({ countUpRef, start}) => (
<h1 ref={countUpRef}></h1>
)}
</CountUp>
</div>
</div>
</div>
</div>
{/*End of Code for celcius to farenheit */}
</React.Fragment>
)
}
}
export default CeltoFahr
CelToFahrBtn (Here the toggle button is created)
import React, { Component } from 'react'
import CelToFahr from './CeltoFahr'
class CelToFahrBtn extends Component {
state = {
celOn: true
}
switchCel = () => {
this.setState({ celOn: !this.state.celOn })
}
render = (props) => {
return (
<div className="button" style={{display: 'inline-block'}}>
<div className="weather">
<div className="figures">
<div className="figuresWrap2">
<div className="mainFigureWrap">
<div onClick={this.switchCel} className="CelSwitchWrap">
<div className={"CelSwitch" + (this.state.celOn ? "" : " transition")}>
<h3>C°</h3>
<h3>F°</h3>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
)
}
}
export default CelToFahrBtn
Here when I click on switchCel it must trigger the celcius to fahrenheit value and vice-versa. How to do it? Any suggestions highly appreciated. Thanks in advance
I would have the celToFahr be the parent component of the celToFahrBtn and then pass the function you want to invoke via props
<CellToFahrBtn callback={yourfunction}/>
What else could you do is having a common parent for these to components where you would again do the execution via props and callbacks
The 3rd option would be having a global state which would carry the function like Redux or Reacts own Context. There again you would get the desired function via props and you would execute it whenever you like. This is the best option if your components are completely separated in both the UI and in source hierarchically, but I don't think this is the case in this case.
https://reactjs.org/docs/context.html
These are pretty much all the options you have
To achieve this you'd need to lift your state up and then pass the state and handlers to the needed components as props.
CeltoFahr & CelToFahrBtn would then become stateless components and would rely on the props that are passed down from TemperatureController
class TemperatureController extends Component {
state = {
celOn: true
}
switchCel = () => {
this.setState({ celOn: !this.state.celOn })
}
render () {
return (
<React.Fragment>
<CeltoFahr celOn={this.state.celOn} switchCel={this.state.switchCel} />
<CelToFahrBtn celOn={this.state.celOn} switchCel={this.state.switchCel}/>
</React.Fragment>
)
}
}
It's probably better explained on the React Docs https://reactjs.org/docs/lifting-state-up.html
See this more simplified example:
import React, {useState} from 'react';
const Display = ({}) => {
const [count, setCount] = useState(0);
return <div>
<span>{count}</span>
<Button countUp={() => setCount(count +1)}></Button>
</div>
}
const Button = ({countUp}) => {
return <button>Count up</button>
}
It's always possible, to just pass down functions from parent components. See Extracting Components for more information.
It's also pretty well described in the "Thinking in React" guidline. Specifically Part 4 and Part 5.
In React you should always try to keep components as dumb as possible. I always start with a functional component instead of a class component (read here why you should).
So therefore I'd turn the button into a function:
import React from 'react';
import CelToFahr from './CeltoFahr';
function CelToFahrBtn(props) {
return (
<div className="button" style={{ display: 'inline-block' }}>
<div className="weather">
<div className="figures">
<div className="figuresWrap2">
<div className="mainFigureWrap">
<div onClick={() => props.switchCel()} className="CelSwitchWrap">
<div
className={'CelSwitch' + (props.celOn ? '' : ' transition')}
>
<h3>C°</h3>
<h3>F°</h3>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
}
export default CelToFahrBtn;
And you should put the logic in the parent component:
import React, { Component } from 'react';
import CountUp from 'react-countup';
import CelToFahrBtn from './CelToFahrBtn';
class CeltoFahr extends Component {
state = {
celOn: true
};
switchCel = () => {
this.setState({ celOn: !this.state.celOn });
};
render() {
return (
<>
<div className="weather">
<div className="figures">
<div className="figuresWrap2">
<div className="mainFigureWrap">
<CelToFahrBtn switchCel={this.switchCel} celOn={celOn} />
</div>
</div>
</div>
</div>
</>
);
}
}
I want to create a basic web application using react. I have implemented creating buttons. I want to redirect to another page on button click. Below is my App.js code
import React from 'react';
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<p>
<buttontoolbar>
<button const path = '/Components'> Click Me </button>
</buttontoolbar>
</p>
</header>
</div>
);
}
export default App;
When i click on 'click me' button it should redirect to Components.js. Below is the code for Components.js
import React from "react"
function app(){
return(
<p>
Welcome to the world.
</p>
)
}
export default app
Long back i have done these king of things in ASP.NET. there i have used Response.redirect to redirect pages which is so simple. As I am new to React, i know nothing about this. Is there anything like that in React?
Basically React does not have "pages". The idea is more to "show" or "hide" components, this gives the user a page/view impression.
The easiest way to achieve routing in React is to use a declarative router library like react router especially for more complex apps.
Here is an example without react router to understand the basic concept:
const ViewOne = ({onClick}) => (
<div>
View 1 <br />
<button onClick={() => onClick("view2")}>Go to view 2</button>
</div>
);
const ViewTwo = ({onClick}) => (
<div>
View 2 <br />
<button onClick={() => onClick("view1")}>Go to view 1</button>
</div>
);
const App = () => {
const [currentView, setCurrentView] = React.useState("view1");
return (
<div>
{
currentView === "view1" ?
<ViewOne onClick={page => setCurrentView(page)} /> :
<ViewTwo onClick={page => setCurrentView(page)} />
}
</div>
);
};
const domContainer = document.querySelector('#my-app');
ReactDOM.render(<App />, domContainer);
<div id="my-app"></div>
<script src="https://unpkg.com/react#16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js" crossorigin></script>
Use react-router-dom package to define routing and then use one of below mentioned ways on onClick event of button.
this.props.history.push("componentpath").
browserHistory object (in react-router package).
Please refer this Link
try Link component of react-router-dom and pass to as a path to it wherever you want to redirect on onClick.
import { Link } from 'react-router-dom'
and Eg.
<Link to={'/Components'}>
<button > Click Me </button>
</Link>
const {Link, BrowserRouter} = window.ReactRouterDOM
function App(){
return (
<BrowserRouter>
<button><Link to='/abc' target='_blank'> Click Me </Link></button>
</BrowserRouter>
)
}
ReactDOM.render(<App/>, document.getElementById("root"))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/react-router-dom/umd/react-router-dom.min.js"></script>
<body><div id="root"></div></body>
In my React app I am using fullpage.js to render two slides containing two different components. I want to run a function inside one of these only when it's the active slide. I tried below code, but once the state changes the entire ReactFullpage is re-rendered causing the first slide to be active again so I'm basically stuck in a loop.
My question is, how can I trigger a function inside the <Player /> component to run only if it's the active slide?
import React from "react";
import ReactFullpage from "#fullpage/react-fullpage";
import AlbumInfo from './AlbumInfo';
import Player from './Player';
class Album extends React.Component {
constructor(props){
super(props);
this.state={
playing: false
}
}
_initPlayer = (currentIndex, nextIndex) => {
if(nextIndex.index === 1) {
this.setState({playing:true})
}
}
render() {
return (
<ReactFullpage
licenseKey='xxxxxxxx-xxxxxxxx-xxxxxxxx-xxxxxxxx'
sectionsColor={["#000000"]}
afterLoad={this._initPlayer}
render={({ state, fullpageApi }) => {
return (
<div id="fullpage-wrapper">
<div className="section">
<AlbumInfo />
</div>
<div className="section">
<Player playing={this.state.playing} />
</div>
</div>
);
}}
/>
);
}
}
export default Album;
From docs:
just add the class 'active' to the section and slide you want to load first.
adding conditionally (f.e. using getActiveSection()) 'active' class name should resolve rerendering problem.
The same method/value can be used for setting playing prop.
Probably (I don't know/didn't used fullpage.js) you can also use callbacks (without state management and unnecessary render), f.e. afterSlideLoad
Update
The issue has been fixed on https://github.com/alvarotrigo/react-fullpage/issues/118.
Version 0.1.15 will have it fixed
You should be using fullPage.js callbacks afterLoad or onLeave as can be seen in the codesandbox provided on the react-fullpage docs:
https://codesandbox.io/s/m34yq5q0qx
/* eslint-disable import/no-extraneous-dependencies */
import React from "react";
import ReactDOM from "react-dom";
import "fullpage.js/vendors/scrolloverflow"; // Optional. When using scrollOverflow:true
import ReactFullpage from "#fullpage/react-fullpage";
import "./styles.css";
class FullpageWrapper extends React.Component {
onLeave(origin, destination, direction) {
console.log("Leaving section " + origin.index);
}
afterLoad(origin, destination, direction) {
console.log("After load: " + destination.index);
}
render() {
return (
<ReactFullpage
anchors={["firstPage", "secondPage", "thirdPage"]}
sectionsColor={["#282c34", "#ff5f45", "#0798ec"]}
scrollOverflow={true}
onLeave={this.onLeave.bind(this)}
afterLoad={this.afterLoad.bind(this)}
render={({ state, fullpageApi }) => {
return (
<div id="fullpage-wrapper">
<div className="section section1">
<h3>Section 1</h3>
<button onClick={() => fullpageApi.moveSectionDown()}>
Move down
</button>
</div>
<div className="section">
<div className="slide">
<h3>Slide 2.1</h3>
</div>
<div className="slide">
<h3>Slide 2.2</h3>
</div>
<div className="slide">
<h3>Slide 2.3</h3>
</div>
</div>
<div className="section">
<h3>Section 3</h3>
</div>
</div>
);
}}
/>
);
}
}
ReactDOM.render(<FullpageWrapper />, document.getElementById("react-root"));
export default FullpageWrapper;