We Keep Coding

React - how to click outside to close the tooltip

This is my current tooltip.
I am using react-power-tooltip
When I click the button, I can close the tooltip.
But I want to close the tooltip when I click outside the tooltip.
How am I supposed to do it?
App.js
import "./styles.css";
import MoreHorizIcon from "#material-ui/icons/MoreHoriz";
import TooltipList from "./TooltipList";
import { useState } from "react";
export default function App() {
const [showTooltip, setShowTooltip] = useState(true);
return (
<div className="App">
<button
className="post-section__body__list__item__right__menu-btn"
onClick={() => {
setShowTooltip((x) => !x);
}}
style={{ position: "relative" }}
>
<MoreHorizIcon />
<TooltipList show={showTooltip} />
</button>
</div>
);
}
TooltipList
import React from "react";
import Tooltip from "react-power-tooltip";
const options = [
{
id: "edit",
label: "Edit"
},
{
id: "view",
label: "View"
}
];
function Tooptip(props) {
const { show } = props;
return (
<Tooltip
show={show}
position="top center"
arrowAlign="end"
textBoxWidth="180px"
fontSize="0.875rem"
fontWeight="400"
padding="0.5rem 1rem"
>
{options.map((option) => {
return (
<div
className="tooltop__option d-flex align-items-center w-100"
key={option.id}
>
{option.icon}
<span style={{ fontSize: "1rem" }}>{option.label}</span>
</div>
);
})}
</Tooltip>
);
}
export default Tooptip;
CodeSandbox:
https://codesandbox.io/s/optimistic-morning-m9eq3?file=/src/App.js
Update 1:
I update the code based on the answer.
It can now click outside to close, but if I click the button to close the tooltip, it's not working.
App.js
import "./styles.css";
import MoreHorizIcon from "#material-ui/icons/MoreHoriz";
import TooltipList from "./TooltipList";
import { useState } from "react";
export default function App() {
const [showTooltip, setShowTooltip] = useState(true);
return (
<div className="App">
<button
className="post-section__body__list__item__right__menu-btn"
onClick={() => {
setShowTooltip((x) => !x);
}}
style={{ position: "relative" }}
>
<MoreHorizIcon />
<TooltipList
show={showTooltip}
onClose={() => {
setShowTooltip();
}}
/>
</button>
</div>
);
}
TooltipList.js
import React, { useEffect, useRef } from "react";
import Tooltip from "react-power-tooltip";
const options = [
{
id: "edit",
label: "Edit"
},
{
id: "view",
label: "View"
}
];
function Tooptip(props) {
const { show, onClose } = props;
const containerRef = useRef();
useEffect(() => {
if (show) {
containerRef.current.focus();
}
}, [show]);
return (
<div
style={{ display: "inline-flex" }}
ref={containerRef}
tabIndex={0}
onBlur={(e) => {
onClose();
}}
>
<Tooltip
show={show}
position="top center"
arrowAlign="end"
textBoxWidth="180px"
fontSize="0.875rem"
fontWeight="400"
padding="0.5rem 1rem"
>
{options.map((option) => {
return (
<div
className="tooltop__option d-flex align-items-center w-100"
key={option.id}
>
{option.icon}
<span style={{ fontSize: "1rem" }}>{option.label}</span>
</div>
);
})}
</Tooltip>
</div>
);
}
export default Tooptip;
Codesandbox
https://codesandbox.io/s/optimistic-morning-m9eq3?file=/src/App.js:572-579

As I can see, you are using material-ui for icons, so there is an option known as ClickAwayListner within material-ui
App.js
import "./styles.css";
import MoreHorizIcon from "#material-ui/icons/MoreHoriz";
import ClickAwayListener from '#material-ui/core/ClickAwayListener';
import TooltipList from "./TooltipList";
import { useState } from "react";
export default function App() {
const [showTooltip, setShowTooltip] = useState(true);
const handleClickAway = () => {
setShowTooltip(false);
}
return (
<div className="App">
<ClickAwayListener onClickAway={handleClickAway}>
<button
className="post-section__body__list__item__right__menu-btn"
onClick={e => {
e.stopPropagation();
setShowTooltip((x) => !x);
}}
style={{ position: "relative" }}
>
<MoreHorizIcon />
<TooltipList show={showTooltip} />
</button>
</ClickAwayListener>
</div>
);
}
Wrap your container with ClickAwayListener

You should add a wrapper element to detect if the click is outside a component
then the showTooltip to false at your code:
codeSanbox
import "./styles.css";
import MoreHorizIcon from "#material-ui/icons/MoreHoriz";
import TooltipList from "./TooltipList";
import { useState, useEffect, useRef } from "react";
export default function App() {
const [showTooltip, setShowTooltip] = useState(true);
const outsideClick = (ref) => {
useEffect(() => {
const handleOutsideClick = (event) => {
if (ref.current && !ref.current.contains(event.target)) {
setShowTooltip(false);
}
};
// add the event listener
document.addEventListener("mousedown", handleOutsideClick);
}, [ref]);
};
const wrapperRef = useRef(null);
outsideClick(wrapperRef);
return (
<div className="App" ref={wrapperRef}>
<button
className="post-section__body__list__item__right__menu-btn"
onClick={() => {
setShowTooltip((x) => !x);
}}
style={{ position: "relative" }}
>
<MoreHorizIcon />
<TooltipList show={showTooltip} />
</button>
</div>
);
}

Here is a crazy little idea. I wrapped your component in an inline-flex div and gave it focus on load. Then added an onBlur event which will hide the menu if you click anywhere else. This can be used if you don't want to give focus on any other element on the page.
https://codesandbox.io/s/epic-kapitsa-yh7si?file=/src/App.js:0-940
import "./styles.css";
import MoreHorizIcon from "#material-ui/icons/MoreHoriz";
import TooltipList from "./TooltipList";
import { useRef, useState, useEffect } from "react";
export default function App() {
const [showTooltip, setShowTooltip] = useState(true);
const containerRef = useRef();
useEffect(() => {
containerRef.current.focus();
}, []);
return (
<div className="App">
<div
style={{ display: "inline-flex" }}
ref={containerRef}
tabIndex={0}
onBlur={(e) => {
debugger;
setShowTooltip(false);
}}
>
<button
className="post-section__body__list__item__right__menu-btn"
onClick={() => {
setShowTooltip((x) => !x);
}}
style={{ position: "relative" }}
>
<MoreHorizIcon />
<TooltipList show={showTooltip} />
</button>
</div>
</div>
);
}
Update 1:
The problem was your button click was called every time you select an item that toggles your state. I have updated the code to prevent that using a useRef that holds a value.
ToolTip:
import React from "react";
import Tooltip from "react-power-tooltip";
const options = [
{
id: "edit",
label: "Edit"
},
{
id: "view",
label: "View"
}
];
function Tooptip(props) {
const { show, onChange } = props;
return (
<>
<Tooltip
show={show}
position="top center"
arrowAlign="end"
textBoxWidth="180px"
fontSize="0.875rem"
fontWeight="400"
padding="0.5rem 1rem"
>
{options.map((option) => {
return (
<div
onClick={onChange}
className="tooltop__option d-flex align-items-center w-100"
key={option.id}
>
{option.icon}
<span style={{ fontSize: "1rem" }}>{option.label}</span>
</div>
);
})}
</Tooltip>
</>
);
}
export default Tooptip;
App
import "./styles.css";
import MoreHorizIcon from "#material-ui/icons/MoreHoriz";
import TooltipList from "./TooltipList";
import { useRef, useState, useEffect, useCallback } from "react";
export default function App() {
const [showTooltip, setShowTooltip] = useState(true);
const [onChangeTriggered, setonChangeTriggered] = useState(false);
const containerRef = useRef();
const itemClicked = useRef(false);
useEffect(() => {
containerRef.current.focus();
}, []);
return (
<div className="App">
<div
style={{ display: "inline-flex" }}
ref={containerRef}
tabIndex={0}
onBlur={(e) => {
debugger;
if (!onChangeTriggered) setShowTooltip(false);
}}
// onFocus={() => {
// setShowTooltip(true);
// }}
>
<button
className="post-section__body__list__item__right__menu-btn"
onClick={() => {
if (!itemClicked.current) setShowTooltip((x) => !x);
itemClicked.current = false;
}}
style={{ position: "relative" }}
>
<MoreHorizIcon />
<TooltipList
show={showTooltip}
onChange={useCallback(() => {
itemClicked.current = true;
}, [])}
/>
</button>
</div>
</div>
);
}
https://codesandbox.io/s/epic-kapitsa-yh7si
Enjoy !!

using useparams and array.find to display detailed data

I am making a small blog application using react js. I have a context api for the user inputs, so that the data can be used globally across components (InputContext.js). Using react router, the user is able to view a list of all blog entries (AllBlogs.js) and view each one of them in detail (BlogDetail.js). What I am trying to achieve is, allow the user to get a detailed view of an individual blog post component from the AllBlogs.js page. All blogs have an "id" property, which is used to query the url and using the array.find method, it is supposed to show a detailed view of the blog with the matching id. The problem is "findBlogs" in BlogDetails that is being passed as a prop to display the detailed individual blog data always only returns the most recent user input value, therefore all blogs show the exact same information. I am unsure as to why this is happening, any guidance towards the right direction is greatly appreciated.
InputContext.js
import React, { useState, createContext, useMemo } from 'react'
//create context
export const InputContext = createContext();
const InputContextProvider = (props) => {
const [blogPost, setBlogPost] = useState({
id: '',
title: '',
author: '',
text: ''
});
//create an array to push all the blogPosts
const [allBlogPosts, setAllBlogPosts] = useState([]);
console.log(allBlogPosts)
//put value inside useMemo so that the component only rerenders when there is change in the value
const value = useMemo(() => ({ blogPost, setBlogPost, allBlogPosts, setAllBlogPosts }), [blogPost, allBlogPosts])
return (
<InputContext.Provider value={value}>
{props.children}
</InputContext.Provider>
)
}
export default InputContextProvider;
WriteBlogPost.js
import React, { useState, useContext, Fragment } from 'react'
import { useHistory } from 'react-router-dom'
import { InputContext } from '../Contexts/InputContext'
import { TextareaAutosize } from '#material-ui/core'
import { v4 as uuidv4 } from 'uuid';
import { Box, TextField, Button, makeStyles } from '#material-ui/core'
const useStyles = makeStyles({
root: {
justifyContent: 'center',
alignItems: 'center',
textAlign: 'center'
}
})
export const WriteBlogPost = () => {
const classes = useStyles();
const [blog, setBlog] = useState({
id: '',
title: '',
author: '',
text: ''
});
const history = useHistory();
const { setBlogPost } = useContext(InputContext);
const { allBlogPosts, setAllBlogPosts } = useContext(InputContext)
const handleBlogPost = () => {
setBlogPost(blog);
setAllBlogPosts([...allBlogPosts, blog]);
history.push("/blogs")
console.log({ blog })
console.log({ allBlogPosts })
}
const handleChange = (e) => {
const value = e.target.value
setBlog({
...blog,
id: uuidv4(),
[e.target.name]: value
})
}
return (
<Fragment>
<Box className={classes.root}>
<div>
<TextField id="standard-basic" onChange={handleChange} value={blog.title} name="title" label="Title" />
</div>
<div>
<TextField id="standard-basic" onChange={handleChange} value={blog.author} name="author" label="Author" />
</div>
<div>
<TextareaAutosize aria-label="minimum height" minRows={20} style={{ width: '70%' }} placeholder="Your blog post"
onChange={handleChange}
value={blog.text}
name="text" />
</div>
<div>
<Button variant="contained" color="primary" onClick={handleBlogPost}>
Submit</Button>
</div>
</Box>
</Fragment>
)
}
AllBlogs.js
import React, { useContext } from 'react'
import { InputContext } from '../Contexts/InputContext'
import { Card, CardContent, Typography } from '#material-ui/core'
import { makeStyles } from '#material-ui/core'
import { Link } from 'react-router-dom'
const useStyles = makeStyles({
root: {
justifyContent: 'center',
alignItems: 'center',
display: 'flex',
textAlign: 'center',
},
text: {
textAlign: 'center'
}
})
export const AllBlogs = () => {
const classes = useStyles();
const { allBlogPosts, blogPost } = useContext(InputContext)
console.log(allBlogPosts)
return (
<div>
<Typography color="textPrimary" variant="h3" className={classes.text}>All blogs</Typography>
{allBlogPosts.map((post, i) =>
<Card variant="outlined" key={i} className={classes.root}>
<CardContent>
<Typography color="textPrimary" variant="h5">
{post.title}
</Typography>
<Typography color="textPrimary" variant="h6">
{post.author}
</Typography>
<Typography color="textPrimary" variant="body2" component="p">
{post.text}
</Typography>
<Link to={`/blogs/${blogPost.id}`}>
Read blog
</Link>
</CardContent>
</Card>
)}
</div>
)
}
BlogDetail.js
import React, { useContext } from 'react'
import { useParams, Route } from 'react-router'
import { SingleBlog } from './SingleBlog';
import { InputContext } from '../Contexts/InputContext';
export const BlogDetail = () => {
const params = useParams();
console.log(params.blogId)
const { allBlogPosts } = useContext(InputContext)
const findBlog = allBlogPosts.find((post) => post.id === params.blogId)
console.log(findBlog)
if (!findBlog) {
return <p>No blogs found.</p>
}
return (
<div>
<h1>Blog details</h1>
<SingleBlog post={findBlog} />
</div>
)
}

Issue
Ah, I see what is happening... had to dig back through your edits to when you included your context code.
In your provider you for some reason store an array of blogs (this part makes sense), but then you also store the last blog that was edited.
const InputContextProvider = (props) => {
const [blogPost, setBlogPost] = useState({
id: '',
title: '',
author: '',
text: ''
});
//create an array to push all the blogPosts
const [allBlogPosts, setAllBlogPosts] = useState([]);
//put value inside useMemo so that the component only rerenders when there is change in the value
const value = useMemo(() => ({
blogPost, // <-- last blog edited
setBlogPost,
allBlogPosts,
setAllBlogPosts
}), [blogPost, allBlogPosts])
return (
<InputContext.Provider value={value}>
{props.children}
</InputContext.Provider>
)
}
export const WriteBlogPost = () => {
...
const [blog, setBlog] = useState({
id: '',
title: '',
author: '',
text: ''
});
...
const { setBlogPost } = useContext(InputContext);
const { allBlogPosts, setAllBlogPosts } = useContext(InputContext)
const handleBlogPost = () => {
setBlogPost(blog); // <-- saves last blog edited/added
setAllBlogPosts([...allBlogPosts, blog]);
history.push("/blogs");
}
const handleChange = (e) => {
const value = e.target.value
setBlog({
...blog,
id: uuidv4(),
[e.target.name]: value
})
}
return (
...
)
}
When you are mapping the blog posts you form incorrect links.
export const AllBlogs = () => {
const classes = useStyles();
const {
allBlogPosts,
blogPost // <-- last blog updated
} = useContext(InputContext);
return (
<div>
...
{allBlogPosts.map((post, i) =>
<Card variant="outlined" key={i} className={classes.root}>
<CardContent>
...
<Link to={`/blogs/${blogPost.id}`}> // <-- link last blog updated id
Read blog
</Link>
</CardContent>
</Card>
)}
</div>
)
}
Solution
Use the current blog post's id when mapping to form the link correctly.
export const AllBlogs = () => {
const classes = useStyles();
const { allBlogPosts } = useContext(InputContext);
return (
<div>
...
{allBlogPosts.map((post, i) =>
<Card variant="outlined" key={post.id} className={classes.root}>
<CardContent>
...
<Link to={`/blogs/${post.id}`}> // <-- link current post id
Read blog
</Link>
</CardContent>
</Card>
)}
</div>
)
}

React siblings components communication

I have an upload file component, delete file component and files table component(presents the existing files in the system using axios) in the same page:
filesPage.js
import React from 'react';
import UploadFile from '../components/UploadFile'
import DeleteFile from '../components/DeleteFile'
import FilesTable from '../components/FilesTable'
function UploadFiles() {
return (
<div className="filesPage">
<UploadFile/>
<DeleteFile/>
<FilesTable/>
</div>
)
}
export default UploadFiles;
Now I want every time I upload new file or delete one, the files table will be updated which means after the axios post/delete, I need to rerender the files table component and do axios get again to get the active files.
Someone can help?
FilesTable.js
import React, {useState, useEffect} from 'react';
import { makeStyles } from '#material-ui/core/styles';
import Paper from '#material-ui/core/Paper';
import Table from '#material-ui/core/Table';
import TableBody from '#material-ui/core/TableBody';
import TableCell from '#material-ui/core/TableCell';
import TableContainer from '#material-ui/core/TableContainer';
import TableHead from '#material-ui/core/TableHead';
import TablePagination from '#material-ui/core/TablePagination';
import TableRow from '#material-ui/core/TableRow';
import axios from 'axios';
function FilesTable() {
const [tfaArray, setTfaArray] = useState([]);
useEffect(() => {
axios.get("api/tfa").then((res) => setTfaArray(res.data)).catch((err) => console.log(err));
}, [])
const columns = [
{id: 'fileId', label: '#', minWidth: 100},
{id: 'name', label: 'name', minWidth: 100},
{id: 'date', label: 'upload date', minWidth: 100}
];
const rows = tfaArray.map((tfa, index) => ({fileId: (index + 1), name: tfa.fileName, date: tfa.dateTime.slice(0,24)}) )
const useStyles = makeStyles({
root: {
width: '50%',
position: 'absolute',
right: '10%',
top: '15%',
},
container: {
maxHeight: 322
},
headerCell: {
background: '#F5F5F5',
fontSize: '16px',
zIndex: '0'
}
});
const classes = useStyles();
const [page, setPage] = useState(0);
const [rowsPerPage, setRowsPerPage] = useState(5);
const handleChangePage = (event, newPage) => {
setPage(newPage);
};
const handleChangeRowsPerPage = (event) => {
setRowsPerPage(+event.target.value);
setPage(0);
};
return (
<>
<Paper className={classes.root}>
<TableContainer className={classes.container}>
<Table stickyHeader aria-label="sticky table">
<TableHead>
<TableRow>
{columns.map((column) => (
<TableCell className={classes.headerCell}
key={column.id}
style={{ minWidth: column.minWidth }}>
{column.label}
</TableCell>
))}
</TableRow>
</TableHead>
<TableBody>
{rows.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map((row, index) => {
return (
<TableRow hover role="checkbox" tabIndex={-1} key={index}>
{columns.map((column) => {
const value = row[column.id];
return (
<TableCell key={column.id}>
{value}
</TableCell>
);
})}
</TableRow>
);
})}
</TableBody>
</Table>
</TableContainer>
<TablePagination
rowsPerPageOptions={[5, 10, 15]}
component="div"
count={rows.length}
rowsPerPage={rowsPerPage}
page={page}
onChangePage={handleChangePage}
onChangeRowsPerPage={handleChangeRowsPerPage}
/>
</Paper>
</>
)
}
export default FilesTable;

Typically with React you do this by lifting state up as described in this React documentation.
In this case, you'd lift the state to the parent of these components, and have the FilesTable receive the list of files as a prop. (Props are basically component state managed by the parent rather than by the component itself.) Similarly the DeleteFile component would receive the function to call to delete a file, the UploadFile component would receive the function to use to add a file, etc.
Here's a simplified example:
const {useState} = React;
const Parent = () => {
const [files, setFiles] = useState([]);
const addFile = (file) => {
setFiles(files => [...files, file]);
};
const removeFile = (file) => {
setFiles(files => files.filter(f => f !== file));
};
return (
<div>
<FilesTable files={files} removeFile={removeFile} />
<UploadFile addFile={addFile} />
</div>
);
};
const FilesTable = ({files, removeFile}) => {
return (
<React.Fragment>
<div>{files.length === 1 ? "One file:" : `${files.length} files:`}</div>
<ul className="files-table">
{files.map(file => (
<li>
<span>{file}</span>
<span className="remove-file" onClick={() => removeFile(file)}>[X]</span>
</li>
))}
</ul>
</React.Fragment>
);
};
const UploadFile = ({addFile}) => {
const [file, setFile] = useState("");
const onClick = () => {
addFile(file);
setFile("");
};
return (
<div>
<input type="text" value={file} onChange={(e) => setFile(e.target.value)} />
<input type="button" value="Add" disabled={!file} onClick={onClick} />
</div>
);
};
ReactDOM.render(<Parent />, document.getElementById("root"));
ul.files-table {
list-style-type: none;
}
.remove-file {
margin-left: 0.5rem;
cursor: pointer;
}
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>

Objects are not valid as a React child (found: object with keys {username})

I'm starting to learn React and following the tutorial and got stuck with this error when I was trying to upload picture. When I press upload button, this error "Objects are not valid as a React child (found: object with keys {username}). If you meant to render a collection of children, use an array instead." shown up and I couldn't reload the page anymore.
Render Error
Here are the codes:
1.App.js
import React, { useEffect, useState } from "react";
import './App.css';
import Post from './Post';
import { auth, db } from "./firebase";
import Modal from '#material-ui/core/Modal';
import { makeStyles } from '#material-ui/core/styles';
import { Button, Input } from "#material-ui/core";
import ImageUpload from './ImageUpload';
function getModalStyle() {
const top = 50;
const left = 50;
return {
top: `${top}%`,
left: `${left}%`,
transform: `translate(-${top}%, -${left}%)`,
};
}
const useStyles = makeStyles((theme) => ({
paper: {
position: 'absolute',
width: 400,
backgroundColor: theme.palette.background.paper,
border: '2px solid #000',
boxShadow: theme.shadows[5],
padding: theme.spacing(2, 4, 3),
},
}));
function App() {
const classes = useStyles();
const [modalStyle] = React.useState(getModalStyle);
const [posts, setPosts] = useState([]);
const [open, setOpen] = useState(false);
const [openSignIn, setOpenSignIn] = useState('');
const [username, setUsername] = useState('');
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [user, setUser] = useState(null);
//UseEffect -> Run a piece of code based on a specific condition
useEffect(() => {
const unsubscribe = auth.onAuthStateChanged((authUser) => {
if (authUser) {
//user has logged in...
console.log(authUser);
setUser(authUser);
} else {
//user has logged out...
setUser(null);
}
return () => {
//perform some cleanup action
unsubscribe();
}
})
}, [user, username]);
useEffect(() => {
//this is where the code runs
db.collection('posts').onSnapshot(snapshot => {
//everytime a new post is added, this code fires...
setPosts(snapshot.docs.map(doc => ({
id: doc.id,
post: doc.data()
})));
})
}, []);
const signUp = (event) => {
event.preventDefault();
auth
.createUserWithEmailAndPassword(email, password)
.then((authUser) => {
return authUser.user.updateProfile({
displayName: username
})
})
.catch((error) => alert(error.message))
}
const signIn = (event) => {
event.preventDefault();
auth
.signInWithEmailAndPassword(email, password)
.catch((error) => alert(error.message))
setOpenSignIn(false);
}
return (
<div className="app">
{user?.displayName ? (
<ImageUpload username={user.displayName} />
) : (
<h3>Sorry you need to login to upload</h3>
)}
<Modal
open={open}
onClose={() => setOpen(false)}
>
<div style={modalStyle} className={classes.paper}>
<form className="app__signup">
<center>
<img
className="app__headerImage"
src="https://www.instagram.com/static/images/web/mobile_nav_type_logo.png/735145cfe0a4.png"
alt=""
/>
</center>
<Input
placeholder="username"
type="text"
value={username}
onChange={(e) => setUsername(e.target.value)}
/>
<Input
placeholder="email"
type="text"
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
<Input
placeholder="password"
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
<Button type="submit" onClick={signUp}>Sign Up</Button>
</form>
</div>
</Modal>
<Modal
open={openSignIn}
onClose={() => setOpenSignIn(false)}
>
<div style={modalStyle} className={classes.paper}>
<form className="app__signup">
<center>
<img
className="app__headerImage"
src="https://www.instagram.com/static/images/web/mobile_nav_type_logo.png/735145cfe0a4.png"
alt=""
/>
</center>
<Input
placeholder="email"
type="text"
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
<Input
placeholder="password"
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
<Button type="submit" onClick={signIn}>Sign In</Button>
</form>
</div>
</Modal>
<div className="app__header">
<img
className="app__headerImage"
src="https://www.instagram.com/static/images/web/mobile_nav_type_logo.png/735145cfe0a4.png"
alt="" />
</div>
{user ? (
<Button onClick={() => auth.signOut()}>Logout</Button>
) : (
<div className="app__loginContainer">
{/* : is stand for OR */}
<Button onClick={() => setOpenSignIn(true)}>Sign In</Button>
<Button onClick={() => setOpen(true)}>Sign Up</Button>
</div>
)}
<h1>Hello Joes! Let's build an Instagram CLone with React</h1>
{
posts.map(({ id, post }) => (
<Post key={id} username={post.username} caption={post.caption} imgUrl={post.imgUrl} />
))
}
</div>
);
}
export default App;
Here is the ImageUpload file
2. ImageUpload.js
import { Button } from '#material-ui/core'
import React, { useState } from 'react';
import { storage, db } from './firebase';
import firebase from "firebase";
function ImageUpload(username) {
const [image, setImage] = useState(null);
const [progress, setProgress] = useState(0);
const [caption, setCaption] = useState('');
const handleChange = (e) => {
if (e.target.files[0]) {
setImage(e.target.files[0]);
}
};
const handleUpload = () => {
const uploadTask = storage.ref(`images/${image.name}`).put(image);
uploadTask.on(
"state_change",
(snapshot) => {
//progress funtion...
const progress = Math.round(
(snapshot.bytesTransferred / snapshot.totalBytes) * 100
);
setProgress(progress);
},
(error) => {
//Error function...
console.log(error);
alert(error.message);
},
() => {
// Complete function...
storage
.ref("images")
.child(image.name)
.getDownloadURL()
.then(url => {
// Post image on db
db.collection("posts").add({
timestamp: firebase.firestore.FieldValue.serverTimestamp(),
caption: caption,
imageUrl: url,
username: username
});
setProgress(0);
setCaption("");
setImage(null);
});
}
);
};
return (
<div>
{/* I want to have... */}
{/* Caption input */}
{/* File picker */}
{/* Post button */}
<progress value={progress} max="100" />
<input type="text" placeholder="Enter a caption..." onChange={event => setCaption(event.target.value)} value={caption} />
<input type="file" onChange={handleChange} />
<Button onClick={handleUpload}>
Upload
</Button>
</div>
)
}
export default ImageUpload
Thanks guys!

This line is wrong:
<progress value={progress} max="100" />
React components have to be upper case.
Your progress is a number, not a React component
You probably wanted to import the component Progress and write:
<Progress value={progress} max="100" />

How to Change Value of Provider in React Hooks

I currently have this practice code that uses Context and Memo Hooks API
codesandbox
Here is a code snippet
export const InputContext = createContext()
export const ParentProvider = ({ initialValues, children }) => {
console.log(initialValues)
const [values, setValues ] = useState(initialValues);
const value = {
values,
setValues
}
return <InputContext.Provider value={value}>{children}</InputContext.Provider>
}
What I want is to update the value of array that holds indicators using Context API after I click edit.
The problem is that I can't access the Context after accessing through the memo

You'll need to wrap all components that need access to the context with the provider. Something like this...
ParentProvider.js
import React, { createContext, useState } from "react";
const INITIAL_STATE = [];
export const InputContext = createContext(INITIAL_STATE);
export const ParentProvider = ({ children }) => {
const [values, setValues] = useState(INITIAL_STATE);
React.useEffect(() => {
console.log("[parentprovider.js]::new values", values);
}, [values]);
return (
<InputContext.Provider value={{ values, setValues }}>
{children}
</InputContext.Provider>
);
};
ShowIndicator.js
import React, { memo, useContext, useState } from "react";
import { Button } from "react-bootstrap";
import { InputContext } from "./ParentProvider";
const ShowIndicator = memo(
({ name, context }) => {
const [_name, _setName] = useState(name);
const [text, setText] = useState();
const { values, setValues } = useContext(InputContext);
const editData = e => {
let newValues = [...values];
newValues[values.indexOf(_name)] = text;
setValues(newValues);
_setName(text);
};
const handleTextChange = e => setText(e.target.value);
const renderDatas = () => {
return (
<div key={_name} className="d-flex justify-content-between">
<input
className="d-flex align-items-center"
defaultValue={_name}
onChange={handleTextChange}
/>
<div>
<Button
variant="info"
style={{ marginRight: "10px" }}
onClick={editData}
>
Edit
</Button>
<Button variant="dark">Delete</Button>
</div>
</div>
);
};
return <div style={{ marginBottom: "5px" }}>{renderDatas()}</div>;
},
(prev, next) => prev.value === next.value
);
export default ShowIndicator;
App.js
import React, { useState, useContext } from "react";
import "./styles.css";
import { Form, Button, Container } from "react-bootstrap";
import ShowIndicator from "./ShowIndicator";
import { InputContext } from "./ParentProvider";
function App() {
const [curText, setCurText] = useState("");
const { values, setValues } = useContext(InputContext);
const onSubmit = e => {
e.preventDefault();
if (!values.includes(curText)) {
values ? setValues([...values, curText]) : setValues([curText]);
setCurText("");
}
};
const onChange = e => setCurText(e.target.value);
return (
<div>
<Container style={{ marginTop: "10px", textAlign: "center" }}>
<div>Add Indicator</div>
<Form inline onSubmit={onSubmit} style={{ marginBottom: "1rem" }}>
<Form.Control
style={{ flex: "1 0 0" }}
onChange={onChange}
value={curText}
/>
<Button type="submit" variant="success">
Submit
</Button>
</Form>
{values &&
values.map((data, index) => {
return <ShowIndicator key={index} name={data} />;
})}
</Container>
</div>
);
}
export default App;
index.js
import React from "react";
import App from "./App";
import { render } from "react-dom";
import { ParentProvider } from "./ParentProvider";
render(
<ParentProvider>
<App />
</ParentProvider>,
document.getElementById("root")
);

Using useContext you need to pass the entire context object (not only Consumer). And just use it like this
const Component = () =>{
const context = useContext(InputContext)
const { values, setValues } = context
const handleChange = () => setValues('foo')
return(
<>
{values}
<button onClick={handleChange}>Change</button>
</>
)
}