i'm trying to define my "Logo" as an image.
i tried to create a logo.js component, define it as an image and call it here, but i have absolutely no clue on how to solve that.
Here is my banner component,
import React from 'react'
import Banner from 'react-banner'
import 'react-banner/dist/style.css'
import Logo from '../Logo'
export default props => {
return (
<Banner
Logo = "My logo"
url={ window.location.pathname }
items={[
{ "content": "Quoi de neuf au tieks ?", "url": "/wassup" },
{ "content": "Les poucaves du jour", "url": "/lpdc", "children": [
{ "content": "Océane", "url": "/children/oceane" },
{ "content": "Mehdi", "url": "/children/mehdi" },
{ "content": "Yikes", "url": "/children/zemmeled" }
]}
]} />
)
}
if I understand well your question is: I can you pass a logo to the Banner Component ?
A quick look to the react-banner documentation and you can find :
"logo (node)
The image, text, or whatever else you may want to display in the left section of the banner.
url (string)"
https://skipjack.github.io/react-banner/customization
So I believe you can do as follow:
import React from 'react'
import Banner from 'react-banner'
import 'react-banner/dist/style.css'
import Logo from '../Logo'
export default props => {
return (
<Banner
Logo = "My logo"
logo=<Logo />
url={ window.location.pathname }
items={[
{ "content": "Quoi de neuf au tieks ?", "url": "/wassup" },
{ "content": "Les poucaves du jour", "url": "/lpdc", "children": [
{ "content": "Océane", "url": "/children/oceane" },
{ "content": "Mehdi", "url": "/children/mehdi" },
{ "content": "Yikes", "url": "/children/zemmeled" }
]}
]} />
)
}
As you can see on the code above, I pass the Logo component into the props logo of the BannerComponent from the librairy react-banner.
Related
I mapped the component which generated 5 questions and obviously 20 buttons. My problem now is that the first 4 buttons on each row always have the same ID when I try to get each button clicked so I can check if the correct answer was selected. I need every button to have a unique ID. I've tried different ID functions but none seem to work, I think the problem is from my logic and not the ID itself.
import React from "react";
export default function Question_page(props) {
const [triviaApi, setTriviaApi] = React.useState()
const styles = {
backgroundColor: props.isHeld ? "#59E391" : "grey"
}
return (
<div className="main-question-container">
<div className="question">
<h3>{props.my_items.question}</h3>
</div>
<div className="question-button">
<button onClick={props.holdAnswer}>{props.my_items.incorrect_answers[0]}</button>
<button onClick={props.holdAnswer}> {props.my_items.incorrect_answers[1]}</button>
<button onClick={props.holdAnswer}>{props.my_items.correct_answer}</button>
<button onClick={props.holdAnswer}>{props.my_items.incorrect_answers[2]}</button>
</div>
</div>
)
}
The App components below
import QuestionPage from "./components/Question_page";
import React from "react";
import {nanoid} from 'nanoid'
import {BrowserRouter as Router, Route, Routes} from "react-router-dom"
import JsonData from "./JsonData";
export default function App() {
const [colorState, setColorState] = React.useState({
isClicked: true
})
const jsonDataElement = JsonData.map(item => {
return item.results.map((innerItem,index) => {
const myID = Math.random()
return (
<QuestionPage
key={myID}
my_items={innerItem}
isHeld={innerItem.isClicked}
holdAnswer={() => holdAnswer(myID)}
/>
)
})
})
function holdAnswer(ID) {
// here is where I want to check if every bottom has a different ID so I can change the colour and save the variable to check if the answer was right during my "check answer" click. The issue is, that the first button on the row gives me the same ID, I need to get a different ID on every button which contains the answer option so I can run this function
console.log(ID)
}
return (
<Router>
<NavBar/>
<Routes>
<Route path="/" element={<Start/>}/>
<Route path="/question" element={
<div>
{jsonDataElement}
<div className="check-answer-container">
<button className="check-answer">Check answer</button>
</div>
<hr/>
</div>
}/>}/>
</Routes>
</Router>
);
}
The JSON data im using
export default [{
"response_code": 0,
"results": [
{
"category": "Science: Computers",
"type": "multiple",
"difficulty": "medium",
"question": "Which of these is the name for the failed key escrow device introduced by the National Security Agency in 1993?",
"correct_answer": "Clipper Chip",
"incorrect_answers": [
"Enigma Machine",
"Skipjack",
"Nautilus"
]
},
{
"category": "Science: Computers",
"type": "multiple",
"difficulty": "medium",
"question": "In the server hosting industry IaaS stands for...",
"correct_answer": "Infrastructure as a Service",
"incorrect_answers": [
"Internet as a Service",
"Internet and a Server",
"Infrastructure as a Server"
]
},
{
"category": "Science: Computers",
"type": "multiple",
"difficulty": "medium",
"question": ".rs is the top-level domain for what country?",
"correct_answer": "Serbia",
"incorrect_answers": [
"Romania",
"Russia",
"Rwanda"
]
},
{
"category": "Science: Computers",
"type": "multiple",
"difficulty": "medium",
"question": "What was the first Android version specifically optimized for tablets?",
"correct_answer": "Honeycomb",
"incorrect_answers": [
"Eclair",
"Froyo",
"Marshmellow"
]
},
{
"category": "Science: Computers",
"type": "multiple",
"difficulty": "medium",
"question": "The name of technology company HP stands for what?",
"correct_answer": "Hewlett-Packard",
"incorrect_answers": [
"Howard Packmann",
"Husker-Pollosk",
"Hellman-Pohl"
]
}
]
}]
You're only setting myID once right now so all buttons are receiving the same ID - you need to set it for each button instead of once for the whole QuestionPage.
You could probably make a function on Question_page that returns Math.random and then call that from id={} on each button
guys!
I have object with images.
I need to go through the object and render images from there. (I will have plenty of them).
Here is my js file:
const myJson = {
"data": [
{
"id": 1,
"name": "Landscape of Saint-Remy",
"path": "./a.jpg",
"cost": 400,
},
{
"id": 2,
"name": "Landscape of Saint-Remy",
"path": "./b.jpg",
"cost": 400,
},
{
"id": 3,
"name": "Landscape of Saint-Remy",
"path": "./c.jpg",
"cost": 400,
},
]
}
export default myJson;
I try to render it in my Home component like this:
import React from 'react';
import myJson from '../../server/myJson';
function Home() {
return (
<div>
<Hi />
{myJson.data.map(key => (
<img src={require(`${key.path}`)} key={key} />
))}
</div>
)
But got an error: Module can't be found.
If I render images like this:
<img src={key.path} key={key} />
I see 200ok, but no image because I need to import it and that is why I used require to import image and use it. But it's not working.
Please, help me!
This is not the way to import images, you need to config you webpack and add file-loader or url-loader to require images inside your javascript.
Take a look at this answer:
https://stackoverflow.com/a/37673142/5497628
Here this is how you can do it
const myJson = {
"data": [
{
"id": 1,
"name": "Landscape of Saint-Remy",
"path": require("./a.jpg"),
"cost": 400,
},
{
"id": 2,
"name": "Landscape of Saint-Remy",
"path": require("./b.jpg"),
"cost": 400,
},
{
"id": 3,
"name": "Landscape of Saint-Remy",
"path": require("./c.jpg"),
"cost": 400,
},
]
}
export default myJson;
This is how you have to prepare json data.
import React from 'react';
import myJson from '../../server/myJson';
function Home() {
return (
<div>
<Hi />
{myJson.data.map(key => (
<img src={key.path} key={key} />
))}
</div>
)
This is how you can render it.
I'm new to React and for the life of me cannot figure this out.
I have a JSON file (Fontawesome icons):
{
"icons": [
{
"name": "Glass",
"id": "glass",
"unicode": "f000",
"created": 1,
"filter": [
"martini",
"drink",
"bar",
"alcohol",
"liquor"
],
"categories": [
"Web Application Icons"
]
},
{
"name": "Music",
"id": "music",
"unicode": "f001",
"created": 1,
"filter": [
"note",
"sound"
],
"categories": [
"Web Application Icons"
]
},
// etc
To start with I just want to return the name of each icon.
I've been trying to follow various tutorials and have:
import React, { PureComponent } from "react";
import iconList from './services/iconList';
export default class App extends PureComponent {
render() {
const items = iconList.map(data=>{
return(
<div>
<ul>
<li>
<span>{data.name}</span>
</li>
</ul>
</div>
)
})
return items;
}
}
But I get the error: .map is not a function.
I'm not sure what I can do differently. Each tutorial I see seems to use the map function. Is there a better/different way?
Try using
const items = iconList.icons.map(data=>{
Your data is an object with an icons property in it. You can also destructure your iconList when you import:
import {icons as iconList } from './services/iconList';
How to get Icons dynamically in React using extension React Icon kit? I try to find out the way to add a icon dynamically in a MAP-loop as I get them from array "sociallinks"
here is the part of the code
....
import { Icon } from 'react-icons-kit'
import {facebook} from 'react-icons-kit/feather/facebook';
import {instagram} from 'react-icons-kit/feather/instagram';
import {twitter} from 'react-icons-kit/feather/twitter';
....
// dynamic array from redux store
"sociallinks": [
{
"_id": 1,
"type": "facebook",
"linkname": "Facebook",
"link": "https://www.facebook.com/zzzzz/"
},
{
"_id": 2,
"type": "instagram",
"linkname": "Instagram",
"link": "https://www.instagram.com/yyy/"
},
{
"_id": 3,
"type": "twitter",
"linkname": "Twitter",
"link": "https://twitter.com/xxx"
},
{
"_id": 4,
"type": "youtube",
"linkname": "Youtube",
"link": "https://www.youtube.com/user/youtube"
}
]
// problem is here how to markup icon = {xxxxx} from map item.type? item.link and item.linkname works fine.. but not item.type :(((
<ul>
{this.props.data.socialLinks.map((item,i) => (
<li key = {i}> <a href = {item.link}><Icon size={18} icon={item.type} />{item.linkname}</a></li>
))
}
</ul>
I'm learning React and decided to check out JSON Forms ( https://jsonforms.io/docs/tutorial ).
I can get the seed app from https://github.com/eclipsesource/jsonforms-react-seed running, and I also experimented with moving all the form-related stuff into its own component, instead of putting it all in index.js. That works great in the seed app.
Then I decided to try to set up the demo form from the playground schema ( https://mozilla-services.github.io/react-jsonschema-form/ ) in the seed app, just to make sure I knew how to change a form.
This is where the wheels came off. Instead of a form, I get "No applicable renderer found."
I copied the three inputs in the playground ( schema, UISchema, and formData ). Below is the code from the separate component, with the schema, uischema, and data taken directly from the playground data jsonschema provides:
import { JsonForms } from '#jsonforms/react';
import React from 'react';
import { combineReducers, createStore } from 'redux';
import { Provider } from 'react-redux';
import { Actions, jsonformsReducer } from '#jsonforms/core';
import { materialFields, materialRenderers } from '#jsonforms/material-renderers';
const data = {
firstName: "Chuck",
lastName: "Norris",
age: 75,
bio: "Roundhouse kicking asses since 1940",
password: "noneed"
};
const schema = {
"title": "A registration form",
"description": "A simple form example.",
"type": "object",
"required": [
"firstName",
"lastName"
],
"properties": {
"firstName": {
"type": "string",
"title": "First name"
},
"lastName": {
"type": "string",
"title": "Last name"
},
"age": {
"type": "integer",
"title": "Age"
},
"bio": {
"type": "string",
"title": "Bio"
},
"password": {
"type": "string",
"title": "Password",
"minLength": 3
},
"telephone": {
"type": "string",
"title": "Telephone",
"minLength": 10
}
}
};
const uischema = {
"firstName": {
"ui:autofocus": true,
"ui:emptyValue": ""
},
"lastName": {
"ui:autofocus": true,
"ui:emptyValue": ""
},
"age": {
"ui:widget": "updown",
"ui:title": "Age of person",
"ui:description": "(earthian year)"
},
"bio": {
"ui:widget": "textarea"
},
"password": {
"ui:widget": "password",
"ui:help": "Hint: Make it strong!"
},
"telephone": {
"ui:options": {
"inputType": "tel"
}
}
};
const store = createStore(
combineReducers({ jsonforms: jsonformsReducer() }),
{
jsonforms: {
fields: materialFields,
renderers: materialRenderers
},
}
);
store.dispatch(Actions.init(data, schema, uischema));
function SampleForm() {
return (
<div>
<Provider store={store}>
<JsonForms />
</Provider>
</div>);
}
export default SampleForm;
index.js looks like this:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(
<App />,
document.getElementById('root')
);
registerServiceWorker();
and finally, the app itself, App.js, looks like this:
import React from 'react';
import './App.css';
import SampleForm from './sampleform';
const styles = {
container: {
padding: '1em'
},
title: {
textAlign: 'center',
padding: '0.25em'
},
dataContent: {
display: 'flex',
justifyContent: 'center',
borderRadius: '0.25em',
backgroundColor: '#cecece',
},
demoform: {
margin: 'auto'
}
};
const App = () => (
<div>
<SampleForm/>
</div>
);
export default App;
<JsonForms
schema={schema}
uischema={Generate.uiSchema(schema)}
data={data}
renderers={materialRenderers}
/>
https://github.com/eclipsesource/jsonforms/issues/923#issuecomment-374936319