ReactJS >
I want to show by default 10 rows And a button with "Add a new question" so that would be the 11th row.
current row image here
Currently it's only one row [refer to the image below]. And I want 10 initial rows and then add as required. And as many rows can add it could be able to scroll. And on submit I would have all the filled data from that input component. Maybe just console.log when to submit or to alert for now.
NOTE- using formik (could also use state)
Not adding code, because it's a large component. perhaps here's a codesandbox, When I am looking for a solution. If anyone can help me would be great. Please got stuck with this.
I don't know the use case in your case. But here is the simple way to do that.
export default function App() {
const [elements, setElements ] = useState([<QuestionColumn />]);
const element = () => (
<QuestionColumn />
)
console.log(elements)
return (
<div className="App">
{elements.map((child) => child)}
<button
onClick={() => {
setElements([
...elements,
element()
])
}}
>
Add New Question
</button>
</div>
);
}
Related
This question already has answers here:
How to prevent buttons from submitting forms
(20 answers)
Closed 9 months ago.
I am very puzzled by this. I have a modal that opens up to allow a user to fill out information. I have an add button that adds a new row to store and renders a new row. But I realized that even if I am only console logging, clicking that button causes the whole page/tab to do a full refresh. Why is this happening? I was initially checking for props or state changes but cannot figure it out.
handleAddNewRow = () => {
console.log('adding new row')
// this.setState(...) -- this is commented out due to make sure that setting state is not the problem
}
<FormSection>
{this.state.stores.map(store, index) => (
<div key={store.id}>
<div>
<h4>
Choose Store
</h4>
<Dropdown options={storeOptions}>
</Dropdown>
</div>
<TextInput />
<TextInput />
</div>
)}
<div>
<button onClick={this.handleAddNewStore}>
Add New Store
</button>
</div>
</FormSection>
I thought that the setting state was the issue but I commented that out. I tried wrapping the component in a React.memo() as well. Thank you.
It probably causes form sending. You should pass in your onClick callback event parameter and call event.preventDefault() method.
this is the sample code of what I'm trying to do.. on the condition "detailProduct.stock == 0". I want it to change the text if the condition is met. but the thing is only "Equipment Available" appears and "Out of Stock" never appears.. also my button. "Buy Now" I want it to be disabled if the stock = 0 like what I want in my first question. It's kind of hard to find and experiment with some syntax so ill ask here thanks!
Are you sure the value of detailProduct.stock is zero?
for button instead of using the Link element , try to use button itself and in the onClick event use navigate from react-router-dom
function TestElement(){
const navigate = useNavigate()
const [detailProduct, setDetailProduct] = useState({stock: 0})
const handleClick=()=>{
// handle your logic
navigate('/cart') // react-router-dom v6
}
return(
<div>
<button onClick={handleClick} disabled={detailProduct.stock === 0}>
Buy Now
</button>
</div>
)
}
Can't solve a problem. Could someone help me?
I'm building a form and have an autocomplete box. The problem is that if I click somewhere on a page (except for the suggestion item) it doesn't hide. Where should I add setIsAutoCompelte(false) so that it hides?
State
// if true then show the box
const [isAutoComplete, setIsAutoCompelte] = useState(false);
onHandleChangeInput (if input.length > 3)
// show the box
setIsAutoCompelte(true);
onSuggestionClick (if I click on item in autocoplete box)
// hide the box
setIsAutoCompelte(false);
I do not provide full code because it's too big and I'm sure nobody would take a look at it.
You could have an onClick on App that changes the state if the clicked target didn't have the className of the input. You'd need to apply a className such as "autoCompleteBox" to every element/component where you want isAutoComplete to be true.
const clickAnyWhereBut = (e, className) => {
if (!e.current.target.classList.contains(className)) {
setIsAutoCompelte(false); /* you have a typo for "complete/compelte" */
}
}
<div className="App" onClick={() => clickAnyWhereBut("autoCompleteBox")}></div>
This is a lot easier if you're using redux because you wouldn't need to pass down the setIsAutoCompelte[sic] state.
My aim is to delete the button, I have just clicked. I understand there may be numerous ways such as creating a deleteButton component, and setting the state appropriately.
However, my return function in the main App component will also render another button (this I can do), but I think this may add to the complexity.
I'm currently struggling to pin-point the ideal solution, so please help.
Okay, so I've managed to solve my question, although I'm sure there's other ways too.
To further clarify...
I had a form which I wished to render, when clicking on a 'Create' Button.
At the same time, I wished to remove the 'Create' button, once clicked.
The end result is to only display the form and nest a new button in the return function.
1) Set the initial state of the form to false:
this.state = {
displayForm: false,
}
2) Then use setState within the displayForm function to allow for the change in state, once the button is clicked:
displayForm(){
this.setState({
displayForm: !this.state.displayForm {/* true */}
})
}
3) set a style object within the render function, such as:
render() {
const btnStyle = {
display: 'block',
} ...
4) Use an IF statement to change the display style of the button if the form has been rendered
if(this.state.displayForm){
btnStyle.display = 'none'
}
5) Now, within the return function, use your JSX tags appropriately and call the function onClick, as well as the style to be applied.
<Button
style={btnStyle}
onClick={() => {
this.displayForm()
}}>Create</button>
{this.state.displayForm && ([
<Form />,
<br />,
<Button>Add Schema</Button>,
])}
NOTE: the < Form /> and < Button /> components have been imported and added here.
So, once the 'Create' button has been clicked, the form displays (true), and thereby the 'Create' button disappears from the Virtual DOM. I've also nested another (new) button as intended, underneath the form.
I was trying to develop a dynamic list component, which involves state snyc. I have to admit the current design is terrible, it's not readable but at least I've made some progress. However I can't solve an issue, the delete has a bug.
https://codesandbox.io/s/wkqoz0wwv8
To reproduce it:
click 'add more' twice, to add 2 new item.
fill in the value for the last dropdown.
delete the 2nd list.
Something is not right there, it supposes to delete the 2nd item and kep the state of the last item.
The problem is not how you are removing the state but how you are rendering it, you are actually using the times function to creates a loop will will iterate row_count number of times and give you the index,
All you need to do is iterate over your data object like
return (
<div className="companyContactInfo-addContact">
{Object.keys(company_contacts).map(i => this.singleContact(i))}
<div className="row">
<div className="col-xs-12">
<a onClick={::this.addNewRow}>
<span>Add</span>
</a>
</div>
</div>
</div>
);
Also you once the duplicated variable is modified you could just assign it to state rather than using spread operator
handleInputChange(e, index) {
let targetedContact = this.state.company_contacts[index];
targetedContact.value = e.target.value;
this.setState({
company_contacts: {
...this.state.company_contacts,
[index]: targetedContact
}
});
}
Working Sandbox