I am trying to change the state of A text by on mouse over on an image but the function is not working.
I have set the state of the heading and parah in tye function but it would not working.
export default class portfolio extends Component {
constructor(props){
super(props);
this.state={
heading:"helo world",
parah:""
}
this.handleDiscription = this.handleDiscription.bind(this);
}
handleDiscription=()=>{
this.setState={
heading:"Reading Friends",
parah:"what do you mean"
}
}
render() {
return (
<div>
<div>
<div className="row ">
<div className="row ">
<div className="reading-friends" style={{textAlign:'center'}}>
<h1 className="heading" style={{fontSize:'50px',fontWeight:'bold',marginTop:'140px',marginBottom:'200px',fontFamily:"catamaran,sans-serif"}} OnClick={this.handleDiscription}>{this.state.heading}</h1>
<p className="parah">{this.state.parah}</p>
</div>
</div>
</div>
<div className="row d-flex justify-content-center">
<div style={{textAlign:'center'}} className="opti-care">
<h1 style={{fontSize:'50px',fontWeight:'bold',marginBottom:'200px',fontFamily:"catamaran,sans-serif"}}>Opticare Solution</h1>
<p>OptiCare Solution is a complete mini ERP for opticians and optometrists.<br/>
We are the first to bring such an extensive solution in the field of Optometry,<br></br>
providing features that are robust and easy to use.</p>
</div>
</div>
<div className="row"></div>
</div>
<div style={{marginTop:'270px'}} className="row ">
<div className="col-lg-3 col-sm-3 col-3 d-flex justify-content-center">
<Reading
show={this.handleDiscription}
/>
//child component
The first issue is how you are using setState(). You are currently attempting to reassign the value of setState() instead of passing an argument to it of the new state you want set:
handleDiscription = () => {
this.setState({
heading:"Reading Friends",
parah:"what do you mean"
});
}
The next issue is you are attempting to bind to OnClick instead of onClick or onHover. It should be at minimum onClick with a lowercase "o":
onClick={this.handleDiscription}
That being said, you mention "hover" in the title, but you are targeting click events, did you instead mean:
onMouseEnter={this.handleDiscription}
Hopefully that helps!
Related
I am trying to utilize React Responsive Carousel. Currently, with my implementation, this code returns all objects in the array on the 1st page of the carousel (rending the point of a carousel useless). I'd like to have it so that each page of the carousel only shows one object in the array and you would need to utilize the "next" or "arrow" button via the carousel to view the next object in the array.
I tried to change profiles.map to profiles.forEach though this doesn't return any object at all.
I'm currently in a coding bootcamp, so forgive me if the code is bad altogether.
const { loading, data } = useQuery(QUERY_PROFILES);
const profiles = data?.profiles || [];
return (
<Carousel>
<div className="flex-row justify-space-between my-4">
{profiles &&
profiles.map((profile) => (
<div className="card col-12 col-xl-6" key={profile._id}>
<div className="card-body">
<h3 className="card-title">
{profile.firstName} {profile.lastName} <br />
<span className="mechLoc">
Location: {profile.location}
</span>
</h3>
<Link
className="seeProfileBtn btn btn-primary"
to={`/profiles/${profile._id}`}
>
See mechanic profile
</Link>
</div>
</div>
))}
</div>
</Carousel>
);
}
I am pulling project info from database and then based on how many projects I have, I push to an array and render. The problem is for some reason the "dropdownOptions" will not toggle between showing and hiding.
I basically just want to be able to click the dropdown arrow and have it show options like "delete" or "settings". Also not sure if I need to have a separate id for each project component created.
Code Snippets:
// Using hook to set display of dropdown to false
const [dropdownOptions, setDropdownOptions] = useState(false);
// This piece automatically renders clickable projects from database
const pList = [];
for (var i = 0; i < project_list.length; i += 1) {
var projectName = project_list[i]
pList.push (
<div className="projects" key={i}>
<div className="projectName">Name: <div className="projectText">{projectName}</div></div>
<div className="projectDate"> Date Created: <div className="projectText">{date}</div></div>
<div className="projectLabels">LabelsLeft:</div>
<div className="drop">
<div className="dropArrow" onClick{setDropdownOptions(!dropdownOptions)}>
{dropdownOptions ? <ProjectDropdown/> : null}
</div>
</div>
</div>
);
};
setpList(pList);
})
// Then I simply render the component "pList"
return (
<div className="container">
<div className="projectsContainer">
<div className="projectsTitle">
Projects:
<div className="addProject" onClick={toggleShow}></div>
</div>
{pList}
<div className="message">
{message}
</div>
</div>
</div>
)
Ideal look would be this before user presses droparrow on project
And this afterwards, but only for the project clicked
You have to options to such problems:
1- make a state for each item in the list, and for each one you have a boolean that can tell if that item has its dropdown opened or not
2- make single state item, but make it a number that represents the clicked on item id, when that id matches the state you open the dropdown for that item
const [selectedItem, setSelectedItem] = useState(-1);
and in your jsx
<div className="projects" key={i}>
<div className="projectName">Name: <div className="projectText">{projectName}</div></div>
<div className="projectDate"> Date Created: <div className="projectText">{date}</div></div>
<div className="projectLabels">LabelsLeft:</div>
<div className="drop">
<div className="dropArrow" onClick{()=>setSelectedItem(i)}>
{selectedItem == i ? <ProjectDropdown /> : null}
</div>
</div>
</div>
And as an advice, it's preferable to add a real id taken from your API, because the key passed to each item is so important for react, not only for showing the dropdown.
Suggested solution code
function TestSolution() {
// Using hook to set display of dropdown to false
const [selectedItem, setSelectedItem] = useState(-1);
// This piece automatically renders clickable projects from database
const pList = project_list.map((projectName, i) => (
<div className="projects" key={i}>
<div className="projectName">Name: <div className="projectText">{projectName}</div></div>
<div className="projectDate"> Date Created: <div className="projectText">{date}</div></div>
<div className="projectLabels">LabelsLeft:</div>
<div className="drop">
<div className="dropArrow" onClick{() => setSelectedItem(i)}>
{selectedItem == i ? <ProjectDropdown /> : null}
</div>
</div>
</div>
))
// Then I simply render the component "pList"
return (
<div className="container">
<div className="projectsContainer">
<div className="projectsTitle">
Projects:
<div className="addProject" onClick={toggleShow}></div>
</div>
{pList}
<div className="message">
{message}
</div>
</div>
</div>
)
}
Thinking in react is different, don't use a new state for some data if you can derive it from another state or data, that will make your life easier.
This is where I need my new list of artists to be:
<div className="d-flex justify-content-center w-50">
{addedArtists}
<div className={`mt-4 mr-2 d-flex ${styles.circle}`}>
<span className={`m-auto`}>ADD +</span>
</div>
</div>
This is the function called when the follow button is clicked
function addArtist(event) {
addedArtists.push(event.target.value)
updateArtists(addedArtists);
ArtistHtml.push(<div key={event.target.value} className={`mt-4 mr-2 d-flex ${styles.circle}`}><span className={`m-auto`}>event.target.value</span></div>)
updateArtistHtml(ArtistHtml)
}
Even after showing that the ArtistHtml state has been updated the html doesn't reflect the change, I even tried doing this
{addedArtists.map(item => (
<div key={item} className={`mt-4 mr-2 d-flex ${styles.circle}`}><span className={`m-auto`}>{item}</span></div>
))}
Still no luck, maybe it's some silly mistake. Can someone please help me out here.
I am learning React on the fly for a project and am having trouble adding classes to already existing components. I have checked other SO threads and looked through tutorials on the react site - it looks like I am doing it correctly with the className but it is not working. For example, in my Event.js:
render: function() {
return (
<div>
<article>
<div className="row">
{ this.drawOrderError() }
<div className="large-4 columns event-img-div">
<img src={ this.props.image }/>
</div>
<div className="large-8 columns event-right-column">
{ this.state.showCreditCard ? this.drawCreditCard() : this.drawTicketing() }
<br />
<div className="event-detail">
<div className="row">
<div className="large-12 column">
<span className="ticket-column-headings">Event Details</span>
<p className="event-details">{this.props.description}</p>
</div>
</div>
</div>
</div>
</div>
</article>
{ this.drawOrderSummaryOverlay() }
</div>
);
}
I have added the class event-img-div - but when I go to the browser I do not see it added in console, and cannot apply styles to that class. What am I doing wrong? Can provide more code if needed.
I am changing the files in a local directory and running on local host, using gulp to start the server.
I am using REACT JS with a FLUX IMPLEMENTATION called ALT.
I started with a working React Component:
ConfirmEditModal = React.createClass({
getInitialState(){
console.log('ConfirmEditModal - getInitialState');
var state = {sample: 'MY_SAMPLE_STATE'};
console.log(state);
return state;
},
onChange(state){
console.log('ConfirmEditModal - onChange');
console.log(state);
this.setState(state);
},
componentDidMount(){
console.log('ConfirmEditModal - componentDidMount');
//SeedStore.listen(this.onChange);
},
componentWillUnmount(){
//SeedStore.unlisten(this.onChange);
},
render(){
return (
<div className="ui modal edit">
<i className="close icon"></i>
<div className="header">Form For Editing</div>
<div className="content">
<div className="ui form">
<h4 className="ui dividing header">Birth Information</h4>
<div className="field">
<label>Name</label>
<input name="name" type="text" placeholder="Name"></input>
</div>
</div>
</div>
</div>
);
}
});
Pls note the commented out code of SeedStore.listen(this.onChange) and SeedStore.unlisten(this.onChange).
the above code works as long as those 2 lines are commented out.
Those 2 lines are the code required to listen to the store using ALT (FLUX IMPLEMENTATION).
If I uncomment those 2 lines I will end up with this code:
ConfirmEditModal = React.createClass({
getInitialState(){
console.log('ConfirmEditModal - getInitialState');
var state = {sample: 'MY_SAMPLE_STATE'};
console.log(state);
return state;
},
onChange(state){
console.log('ConfirmEditModal - onChange');
console.log(state);
this.setState(state);
},
componentDidMount(){
console.log('ConfirmEditModal - componentDidMount');
SeedStore.listen(this.onChange);
},
componentWillUnmount(){
SeedStore.unlisten(this.onChange);
},
render(){
return (
<div className="ui modal edit">
<i className="close icon"></i>
<div className="header">Form For Editing</div>
<div className="content">
<div className="ui form">
<h4 className="ui dividing header">Birth Information</h4>
<div className="field">
<label>Name</label>
<input name="name" type="text" placeholder="Name"></input>
</div>
</div>
</div>
</div>
);
}
});
and I get this error:
Error: Invariant Violation: findComponentRoot(..., .0.1.1.0.4.2.0.1.1): Unable to find element. This probably means the DOM was unexpectedly mutated (e.g., by the browser), usually due to forgetting a <tbody> when using tables, nesting tags like <form>, <p>, or <a>, or using non-SVG elements in an <svg> parent. Try inspecting the child nodes of the element with React ID ``.
I would like to understand what is going on behind the scenes that would be causing this error, because as far as I can understand it....listening to a store just means that you listen to any state changes in the store and that's it....it has got nothing to do with parent child components and FINDING ELEMENTS.......
What's the explanation behind this error?
I would not have thought that listening to a store would affect finding of elements as the error suggests.
Other stackOverflow articles Q/A on this suggests that there are changes in the DOM that is not intended.....but listening to a store should not affect the DOM right??? thus my confusion.....
What's the logic and explanation behind this error?