What am I missing to make it work?
I suppose the answer is very easy, but really, I'm starting in
React and still do not know why it does not work. If anyone knows, I am very grateful.
Thanks.
import React from 'react';
var a=30;
var b=20;
function App() {
return (
<div>
<h1>if or else</h1>
<c/>
</div>
);
}
export default App;
function c(a,b) {
if (a >= b){
return (
<div>
<h2> A is greater than B</h2>
</div>
);
}
else {
return (
<div>
<h2>B is greater than A</h2>
</div>
);
}
}
Hey you need to do it like this
import React from 'react';
function App() {
return (
<div>
<h1>if or else</h1>
<C a={20} b={30}/>
</div>
);
}
export default App;
function C({a, b}) {
if (a >= b){
return (
<div>
<h2> A is greater than B</h2>
</div>
);
}
else {
return (
<div>
<h2>B is greater than A</h2>
</div>
);
}
}
First, react components need to start with a capital letter, otherwise the React renderer will treat it as plain HTML.
Change your function declaration to:
function C(a,b) {}
And change your JSX where you call that component to:
<C/>
Second, a component must take a single argument (the props), but your component takes two arguments. And then where you call the component, you don't currently pass in any props.
So make your component take props as a single object:
function C(props) {
if (props.a >= props.b) {
//...
And now pass the props in where you invoke the component:
<C a={a} b={b} />
Related
Event triggered but component not work, why?
App.js
import Change from "./Change";
function App() {
return (
<div>
<button onClick={()=><Change/>}>Click here</button>
</div>
);
}
Change.js
const Change=()=>{
return console.log('inside Change.js')
}
export default Change
I know only Change.js also converted to normal function by BABEL.
NOTE: I HAVE REPLACED THIS QUESTION WITH ONE WITH MORE CLARITY AT THE LOCATION: Context not returned when referencing React component as function instead of JSX
I WOULD LIKE TO DELETE THIS BUT SO WILL NOT LET ME.
I have the following JavaScript file that is one React component calling another one nested inside it. I want to change this to not use the name of the nested component but instead create the internal component as an anonymous one.
I want to usr the JavaScript name and not return JSX.
Here is my original working component
const InsideComponent = () => {
return (
<div>
Inside Component
</div>
);
};
export default function Speakers() {
return (
<div>
<InsideComponent />
</div>
);
}
I've tried a few combinations including this below that do not work
export default function Speakers() {
return (
<div>
{
return (
{ InsideComponent()}
)
}
</div>
);
}
Using { inside the context of JSX stops the JSX syntax and begins a plain JavaScript expression. (Not a function - no return.) So from here
<div>
{
for the syntax to be valid, you'd need to have an expression that evaluates to a JSX element:
export default function Speakers() {
return (
<div>
{
(
<div>
Inside Component
</div>
)
}
</div>
);
}
But the nesting of a JavaScript expression isn't useful at all there - better to just insert the plain JSX instead.
export default function Speakers() {
return (
<div>
<div>
Inside Component
</div>
</div>
);
}
When you want to merge components, you just need to merge the JSX portion of it.
In your example, you can just do
export default function Speakers() {
return (
<div>
<div>
Inside Component
</div>
</div>
);
}
Why not this?
export default function Speakers() {
return (
<div>
<div>
Inside Component
</div>
</div>
);
}
Unless you're using the InsideComponent as part of other components, there is no need to separate the two. But if you want to, just use it like you would any other component.
export default function Speakers() {
return (
<div>
<div>
<InsideComponent />
</div>
</div>
);
}
export default function Speakers() {
return (
<div>
<div>
Inside Component
</div>
</div>
);
}
Is this is what you are looking for?
Is there a way using a High Order Component to add elements programatically to a Component? I was wondering if there was a way using React.createElement to append the component's children? Here is the code that I have so far:
import React, { Component } from 'react'
import ReactDOM from 'react-dom'
function addAnElement(WrappedComponent) {
return class Enhancer extends WrappedComponent {
render() {
const elementsTree = super.render()
// Programatically add a child?
// Update elementTree.props.children somehow?
return elementsTree
}
}
}
class JustSomeText extends Component {
render() {
return (
<div>
<p>A long time ago, in a galaxy far, far away.</p>
{/* I want to add an element here? */}
</div>
)
}
}
function App() {
const ExtendedComponent = addAnElement(JustSomeText)
return (
<div className="App">
<ExtendedComponent />
</div>
)
}
export default App
ReactDOM.render(<App />, document.getElementById('root'))
I'm also interested in other, more effective ways to achieving the same result.
The simplest way to achieve this (although it does not use HOC) is using the children prop in React.
class JustSomeText extends Component {
render() {
return (
<div>
<p>A long time ago, in a galaxy far, far away.</p>
{this.props.children}
</div>
)
}
}
function App() {
return (
<div className="App">
<JustSomeText>
<p>more text!</p>
</JustSomeText>
</div>
)
}
This will render the following:
<div className="App">
<div>
<p>A long time ago, in a galaxy far, far away.</p>
<p>more text!</p>
</div>
</div>
Refer to this for further detail on children - https://reactjs.org/docs/composition-vs-inheritance.html
I want to display dynamically an imported image within a function on React (create-react-app).
Code:
import React, { Component } from 'react';
import reactImg from './img/react.png';
export default class MyPage extends Component {
renderImage(imageName) {
return (
<img src={imageName.toLowerCase()+'Img'} alt={techName} />
);
}
render() {
return (
<p>
{this.renderImage("React")}
</p>
)
}
};
This render:<img src="reactImg" alt="React" />
Instead of what I want: <img src="./img/react.png" alt="React" />
How to display an imported image dynamically within a function please ?
Not sure if it what you are looking for, but here you go:
renderImage(imageName) {
return (
<img src={imageName.toLowerCase()+'Img'} alt={techName} />
^^^^^^^^^ ^^^
// thats wrong concatenation bc your image path looks different
);
}
Try this one instead of your:
<img src={`./img/${imageName.toLowerCase()}.png`} alt={imageName} />
import reactImg from './img/react.png';
import meteorImg from './img/meteor.png';
renderImage(imageName) {
let imageCode;
switch(imageName) {
case 'React':
imageCode = reactImg; break;
case 'Meteor':
imageCode = meteorImg; break;
}
return (
<img src={imageCode} alt={imageName} />
);
};
render(){
return(
<p>
{this.renderImage("React")}
{this.renderImage("Meteor")}
</p>
This render:
<img src="/static/media/react.8d679960.png" alt="React">
It works.
I am at a loss as to why my React component is not rendering correctly. It all looks fine to me. Maybe somebody else could point out something I've missed.
import React, {Component} from 'react';
class Voting extends Component {
renderButton(item) {
return (
<button type='button' className='btn btn-primary'>
{item}
</button>
)
}
render() {
return this.props.pair.map(item => {
return(
<div>
{this.renderButton(item)}
</div>
)
});
}
}
export default Voting;
Here is the error
bundle.js:9044 Uncaught Error: Voting.render(): A valid React element
(or null) must be returned. You may have returned undefined, an array
or some other invalid object.(…)
When I return a simple div with Hello World inside it from my render() method, it returns fine and gets displayed. I logged the return from the function call to the renderButton method like so:
console.log(this.renderButton(item));
and I get an object which has the props. Although I am not sure an object is supposed to be returned?
You need to wrap your return in a div, components should return only one element.
render() {
return (
<div>
{ this.props.pair.map(item => this.renderButton(item)) }
</div>
)
}