My Video Footer is not showing up and i don't know anything wrong with it. Pls help me! Thank you so much! This is my codesandbox link: https://codesandbox.io/s/bold-parm-v8jv8?file=/src/Video.js
It seems you dont have anything in your VideoFooter component. You are importing a component that is not created, even in your app component you are not using Video component
??
React first renders App.js and that file needs to render all
You don't export any "videoFooter"
do not name component in camelCase, should be "VideoFooter" instead.
Component name is always start with capital letter.
See the React Doc for more info
you append your App to render at root. but inside App component you didn't include anywhere to your footer component.
See:
https://codesandbox.io/s/interesting-davinci-z1k8h?file=/src/App.js
Related
This is the code for App.js (The code commented out is how the Counters component gets rendered in the code)
This is the error I'm getting when I try to render it currently, not able to render it using the class name
This the code for counters.js
Thanks in Advance! I'm new to React and any solutions would really help me!
To make this short, I am trying to render some routes wrapped in ErrorBoundaries inside the Router but it does not correctly match the path supplied.
Here is a quick sandbox example that I set up to show what I am talking about.
If you check out the sandbox, and click on the test link, you can see that nothing renders even though the ComponentWithoutErrors has a path match on /test.
Any help would be greatly appreciated.
https://codesandbox.io/s/still-fire-bfehr?fontsize=14&hidenavigation=1&theme=dark
This issue happens because ComponentWithoutErrors has a path of test and the ErrorBoundary surrounding it also has a path of test. So it matches test/test. We need to make the ComponentWithoutErrors component to have a path of /.
Here is the codesandbox
https://codesandbox.io/s/infallible-zhukovsky-evw2b
I have a component where I upload image. Then I want to pass it to another component which is in another file. How can I do this? Can you explain with some code?
Can you share your code which uploads an image?
I believe you don't need to pass an image to another component if you know the path/name of an image.
If you need to pass, you can use props.
In first Component:
<AnotherComponent image={pathAndNameOfImageFile} />
In AnotherComponent, you can access image as:
this.props.image
Hope this helps you.
Code in Atom - lookin nice :D
This code won't working and I have no idea why ;/
In app it's making empty markup and under text "zehy".
I'm new in ReactJs and it's very frustrating ...
Components need to be PascalCase in order to work. In JSX, lower case names aren't treated as html tags. Change <taskItem /> to <TaskItem />
React components need to be upper-cased first letter (capitalised).
See https://reactjs.org/docs/jsx-in-depth.html#html-tags-vs.-react-components
So I've just started learning React and Redux, so I apologize if this is a very noobish question. But I've emptied my Google quote, and can't find anything that helps me.
My problem is: I work on a site with React, Redux, and Foundation 6. One of my React components have a link, that when clicked, should open a Modal with a specific warning for that link. So I've created a component with my modal markup:
ComponentModal.js:
import React, { PropTypes } from 'react';
const Modal = () => (
<div className="reveal" id="exampleModal1" data-reveal>
<h1>Awesome. I Have It.</h1>
</div>
);
export default Modal;
The component with a link renders some stuff, but basically have a
<a data-open="exampleModal1">Click me for a modal</a>
tag in it's render.
And although inspecting the page confirms that the markup for the modal exists, nothing happens when i click the link.
If I move the popup from the component, and into the DOM, the link works.
Some trial and error shows me, that if i manually run $(document).foundation(); in the console when ComponentModal is rendered, the popup works as intended.
So my question is kinda two questions:
1. How do I, in Redux, run $(document).foundation(); when my ComponentModal is done rendering? Maybe I'm wrong, but I don't have the componentDidMount() method available to me, where it might make sense to make that call?
2. Is this a totally wrong way to go about it?
Hope it's not too confusing and not too dumb a question :)
FYI, this question/solution has nothing to do with REDUX!
The problem is that you're trying to use React AND Jquery to make your page do cool things.
You should really choose one or the other.
$(document).foundation() is a Jquery library.
Instead you should use something like React Foundation which removes the jquery dependency and gives you foundation components built with react.
You can do $(document).foundation() in React inside componentDidMount of the component that has the reval modal or better yet You can do this inside componentDidMount of the top most partent in your app.
componentDidMount in React runs once after all the DOM nodes related to that component is mounted. What $(document).foundation() does, if it runs inside componentDidMount, is that it binds event handlers on the elements that have foundation realated attributes like data-dropdown or data-reveal.
componentDidMount() {
$(document).foundation();
}