Problem with ActionListener to give a buttona value - user-interface

Question

I'm trying to give a functions to an array of jbuttons with ActionListener
but when I pass 'i' as variable it gives erorr :
App.java:45: error: local variables referenced from an inner class must be final or effectively final
the error is on line 45, 58, and 71.
Here's the code :
import java.awt.event.*;
import javax.swing.*;
import java.awt.*;
public class App extends JFrame {
App(){
JFrame calcFrame = new JFrame();
calcFrame.setSize(320, 420);
calcFrame.setVisible(true);
calcFrame.setTitle("Calculator");
calcFrame.setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE);
calcFrame.setResizable(false);
calcFrame.getContentPane().setBackground(new Color(0x123456));
//add panel
JTextField textField = new JTextField();
textField.setBounds(35, 20, 200, 100);
textField.setBackground(new Color(0x000000));
calcFrame.add(textField);
JButton cbtn = new JButton(String.valueOf('c')); // clear button
cbtn.setBounds(240, 140, 50, 50);
calcFrame.add(cbtn);
JButton pbtn = new JButton(String.valueOf('^')); // power button
pbtn.setBounds(240, 200, 50, 50);
calcFrame.add(pbtn);
/*Add array of buttuns from 0 ... 9 */
JButton nums[] = new JButton[10];
calcFrame.getContentPane().setLayout(null);
// organzie using if statment
for(int i = 0; i < 4; i++)
{
nums[i] = new JButton(String.valueOf(i)); // organzie first line 0 ... 3
nums[i].setBounds(i * 60, 140, 50, 50);
nums[i].addActionListener(new ActionListener(){
//give buttons a function
#Override
public void actionPerformed(ActionEvent e) {
textField.setText(textField.getText().concat(String.valueOf(i)));
}
});
calcFrame.add(nums[i]);
}
for(int i = 4, j = 0; i < 8; i++, j++)//organzie second line 4 ... 7
{
nums[i] = new JButton(String.valueOf(i));
nums[i].setBounds(j * 60, 200, 50, 50);
nums[i].addActionListener(new ActionListener(){
//give buttons a function
#Override
public void actionPerformed(ActionEvent e) {
textField.setText(textField.getText().concat(String.valueOf(i)));
}
});
calcFrame.add(nums[i]);
}
for(int i = 8, j = 0; i < 10; i++, j++)//last numbers line 8 ... 9
{
nums[i] = new JButton(String.valueOf(i));
nums[i].setBounds(j * 60, 260, 50, 50);
nums[i].addActionListener(new ActionListener(){
//give buttons a function
#Override
public void actionPerformed(ActionEvent e) {
textField.setText(textField.getText().concat(String.valueOf(i)));
}
});
calcFrame.add(nums[i]);
}
//End of numbers 0 ... 9
JButton dotbtn = new JButton();
JButton eqlbtn = new JButton();
dotbtn = new JButton(String.valueOf('.'));// dot button for a value less than 1
dotbtn.setBounds(120, 260, 50, 50);
calcFrame.add(dotbtn);
eqlbtn = new JButton(String.valueOf('=')); //equal button
eqlbtn.setBounds(180, 260, 50, 50);;
calcFrame.add(eqlbtn);
String[] arthmetictools = {"+", "-", "x", "/"};
JButton[] artbtns = new JButton[4]; // array of arthmetic buttons
for (int i = 0; i <= 4; i++) {
artbtns[i] = new JButton(String.valueOf(arthmetictools[i]));
artbtns[i].setBounds( 60 * i, 320, 50, 50);
calcFrame.add(artbtns[i]);
}
}
public static void main(String[] args) {
System.out.println("Hello, World!");
/* make the frame call it calc frame */
App calc = new App();
}
}
Thank you.
Tried to set text field to string of i from for loop.